CSS for a specific page

Solved
Highlighted
Tourist
41 0 1

Great! That is what I was looking for! Thank you very much!

0 Likes
Highlighted
New Member
2 0 0

Hi,

I am trying to set the image width to 100% to fill the full width of the screen on one particular page template.

 

I found that this is the area that affects the page width in the css:

.main-content {
margin-top: $gutter / 2;

.template-index & {
margin-top: 0;
}
}

 

And adding the following works but affects other pages as well.

width: 100%;
max-width: 100%;
padding: 0!important;

 

I wish to add this full width to the page <body id="wild-knight-vodka" class="template-page"> but cannot work out how to enter this into the css that works for that page but does not affect the others.

 

Appreciate any help that you can offer please.

 

Thanks & regards,

Matt

 

0 Likes
Highlighted

Hello @WildKnightDist,

Can you please share your site url

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
41 0 1

Don't know if you got the answer for this but I struggled with this forever until I finally figured it out so I thought I'd share in case you still needed the answer.

 

To add custom CSS to a specific page you need to add the ID and CLASS of the BODY section of the page to your CSS.

 

So if you're in DevTools, scroll to the top of your page and look for:

<body class="class name" id="id name">

 

Then in your CSS you would add:

#id name.class name {

   custom CSS

}

 

So it seems yours would be:

#wild-knight-vodka.template-page {

   .template-index {

      width: 100%;

      etc...

   }

}

 

If the BODY section doesn't have an ID, you can add it by going to Edit Code > theme.liquid

Find the section that starts with 

<body class="template-{{ request.page_type | handle }}">

(it's right after the HEAD section)

 

and add this right below it
<body id="{{ page_title | handle }}" >

 

I'm using the Debut theme so I don't know if the location of the body id is the same for other themes. 

 

Hope that helps.

 

 

 

 

0 Likes
Highlighted
New Member
2 0 0

That's great - really appreciate the reply. Thank you!

0 Likes