Online Only Alignment problem

[murdoc_tcc]

Hey, can someone tell me why there is a alignment problem with "online only" button.

Please check screenshot.

Edited July 16, 2020 by murdoc_tcc (see edit history)

[Razi]

Edit you theme.css file /themes/theme_name/assets/css/theme.css and add this

.product-flags .new.online-only {
    font-size: .8125rem !important;
    margin-top: 7rem !important;
    margin-left: 7.688rem !important;
 }

after this clear the cache

and its look like this

[murdoc_tcc]

Hey Razi, thank you so much for your response, unfortunately that did not do anything.

oh and another problem is, the online only is like a product down, check the picture

 

Quote

#F78320}#header .header-nav .blockcart{margin-left:0;background:inherit}#header .header-nav .blockcart.active{margin-left:.5rem}#header .header-nav .blockcart.inactive .cart-products-count{display:none}#header .header-top{background:#f1f1f1;padding-bottom:0}#header .header-top a[data-depth="0"]{color:#F78320}section.checkout-step{width:100%}.default-input{min-width:100%}label{clear:both}#products .product-miniature,.featured-products .product-miniature{margin:0 auto}.block-contact{padding-left:.9375rem;border:none}.dropdown-item,.menu{padding-left:0}#footer{padding-top:.5rem}}@media (max-width:575px){#content-wrapper,#left-column{padding-left:0!important;padding-right:0!important}
#footer {
    background: #DDDDDD!important;
}
.product-flags .new.online-only {
    font-size: .8125rem !important;
    margin-top: 7rem !important;
    margin-left: 7.688rem !important;
 }
}

 

[Razi]

First of all kindly disable the CSS cache so I can easily check the css.

Thanks

[murdoc_tcc]

Done

 

Edited July 16, 2020 by murdoc_tcc (see edit history)

[Razi]

1: find li.product-flag.online-only in theme.css

li.product-flag.online-only {
    top: 25rem;
}

remove this  top: 25rem; and change with this

li.product-flag.online-only {
    font-size: .8125rem !important;
    margin-top: 10rem !important;
    margin-left: 7.688rem !important;
}

 

[Razi]

and if you want to show the label at the top of product then use

li.product-flag.online-only {
    font-size: .8125rem !important;
    margin-left: 7.688rem !important;
}

[murdoc_tcc]

Razi, Thank you so much, it's working now.

Thank you so much.

[Razi]

Thanks, always welcome

You can give a like by clicking on the gray heart below the each post.