How to apply custom css in woocommerce product page for mobile screen resolution?

user_18437017 0
Viewed 50

I am new to wordpress and I want to apply css on single product page only for changing the location of "Sale" icon. I am trying following code in custom css but its not making any changes.

@media only screen and (max-width: 767px){
.single-product .woocommerce .has-product-nav span.onsale {
    top: 7rem !important;
    margin-top: 0px;
}
}
wordpress css
1 Answers

Firstly, in my opinion, it is always more concise to assign the generic css rules you need for your class and then target the viewports for mobile, tablet and large desktops.

I think that the problem you are facing is that there is already another css rule which overwrites the mobile version css rule. Remove the !important from your desktop's version .single-product if there is one.

Naturally, that does solve the issue.

 /* Desktop Version */
 .single-product .woocommerce .has-product-nav span.onsale {
    top: 7rem;
    margin-top: 0px;
  } 

 // set the orientation of your mobile viewport
 @media screen and (max-width: 767px) and (orientation:portrait) {
    .single-product .woocommerce .has-product-nav span.onsale {
        top: 5rem !important;
     }
   }

 @media screen and (max-width: 767px) and (orientation:landscape) {
    .single-product .woocommerce .has-product-nav span.onsale {
        top: 4rem !important;
     }
  }
user_45963130
Related