How to have one specific element only apply to product page?

Solved
Tourist
12 1 1

Hi all,

So I've been trying to get the HR (line break) only have a margin-left: 0 on my product page for min-width:591px, and not the rest of the pages (mainly homepage important) & below 590px. I've tried working with %if%, %unless%, and request.page_type == 'index'. However, nothing seems to work and it breaks my pages.

Correct (Product page mobile).pngCorrect (product page mobile)Correct (Product page desktop).pngCorrect (product page desktop)Example of homepage_the teal bar should be moved to center.pngWrong (Homepage)

 

 

Here is the code for HR--small (the one I want to change):

@media screen and (max-width: 590px){
  .hr--small {
    @extend hr;
    margin: 20px auto!important;
  }
}

@media screen and (min-width: 591px){
  .hr--small {
    @extend hr;
    margin-top: 20px auto!important;
    margin-right: 20px auto!important;
    margin-bottom: 20px auto!important;
    margin-left: 0px auto!important;
  }
}

 

0 Likes

Success.

Hello,

If you want HR (line break) only have a margin-left: 0 on  product page for min-width:591px

Then please add below code in theme.scss file

@media screen and (min-width: 591px){
 .template-product .hr--small {
margin:0;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Tourist
12 1 1

Worked! Thanks a lot. 

0 Likes