Change css for a specific page

Spintiller
Tourist
47 0 2

Using the debut theme - is there a way to change the css in theme.scss.liquid file to make a change to only a specific page?

 

I want to change the padding on the Products page but the css is also connected to the index page so it's changing the padding on both:

 

.main-content {
display: block;
padding-top: $section-spacing-small;

@include media-query($medium-up) {
padding-top: $section-spacing;
padding-top: 0;

 

Is there script I can add so that the "padding-top: 0;" only applies to a specific page?

 

Thanks!

0 Likes

Hello @Spintiller,

Yes,We can change css for specific page using that Page specific class.

Can you please share your site url so that I will give you exact solution.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
CANDISOFT
Shopify Partner
1103 146 480
To not affect on another page you need to add id to parent or container on any one page. After that you can make changes in css using that new added id.

If satisfied with answer give a like and mark my answer as solution.

Thank you
If helpful, Please Like and accept The Solution.
0 Likes
Spintiller
Tourist
47 0 2

Thank you!

 

It's spintiller.com, password is Sp1n*19707

0 Likes
CANDISOFT
Shopify Partner
1103 146 480
If you want me to change css.
You need to add me as staff.
candisoft100@gmail.com
If helpful, Please Like and accept The Solution.
0 Likes
Spintiller
Tourist
47 0 2

canidSoft... was hoping to get some guidance so I could do it myself. Only a beginner with CSS and the shopify file system is mega confusing so if you are able to explain more about your response I'd appreciate it.

0 Likes
CANDISOFT
Shopify Partner
1103 146 480
Your css is affecting both page right?
Then you habe to take an id on parent of a div in which you want to change.
Then you should add css using that id.

If helpful, Please Like and accept The Solution.
0 Likes
CANDISOFT
Shopify Partner
1103 146 480
Assume you have product page Where you have class main-content, take an id like product-page-parent where you have class main-content. And now u can add css using the id which will only effect this product page.

Example.

#product-page-parent{
background-color: grey;
}
- i hope you understood.
-then give me likes and mark my answer as accepted solution.

Thank you
If helpful, Please Like and accept The Solution.
0 Likes
Spintiller
Tourist
47 0 2

I think I understand. 

 

So if I'm using DevTools and find the element I want to change is "main-content" on the Home page, still unclear how to find the ID to use in the css.

0 Likes
CANDISOFT
Shopify Partner
1103 146 480
Not to find but you should add id to div of the class which has common classes of div on both pages.
If helpful, Please Like and accept The Solution.
0 Likes