Modify CSS for a specific page only

Highlighted
Tourist
41 0 2

Can anyone help with how to make css changes that only affect a specific page or section?

 

If I change the .section-header margin to "0" as below, is there any way to designate that the change should only be applied to the Products page or whatever page I want to be specified?

 

.section-header {
margin-bottom: $section-spacing-small;

@include media-query($medium-up) {
margin-bottom: $section-spacing;
margin-bottom: 0px;
}

 

Thanks!

0 Likes
Highlighted
Shopify Partner
607 95 138

Hello @Spintiller,

 

<style>

apply your style

</style>

 

Apply css only to product_template.liquid section  

 

 

0 Likes
Highlighted
Tourist
41 0 2

Thank you.

 

Where do i go to do the same thing to the home / index page? I don't see those listed as templates in the Sections folder.

0 Likes
Highlighted
New Member
6 0 0

Hello. I created a button within the description section of a product page. I added css inline styling by using <style></style> however, my css is having no affect on the button. Here is all of my code.

<p><a class="button" href="url of page" target="_blank" title="View the Certificate of Analysis" rel="noopener noreferrer">View the Certificate of Analysis</a></p>
<p> </p>
<style>
.button{
   background-color: #ffdf37;
   color: #183028;
   font-size: 16px;
   padding: 10px 30px;
   text-align: center;
   display: inline-block;
   text-decoration: none;
}

.button:hover{
   background: #454a89;
   color: #fff;
}
</style>

0 Likes
Highlighted
Astronaut
1083 178 213

hello,

Please send the URL of your store and also which page you'd like the styles to be applied to.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
6 0 0

I don't see why that's needed. I need to make a button on a "Product" page. There aren't many opportunities to add html - only one that I know of and that is in the "Description" section at the top. I've also given you my entire code for the button. Why would you need the whole store?

0 Likes
Highlighted
Astronaut
1083 178 213

@bartolinidesign 

Without checking out your store to debug it I'm working in the dark; unfortunately separated pieces of code themselves are not quite efficient when it comes to developing an appropriate solution. 

Anyhow, I'm just trying to help you out. I don't quite understand the reluctance to share the store but I absolutely respect it.  

I hope you can manage to get this working.

Kind regards, 
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
6 0 0

OK. If it will help you help me - here is the url for the page https://enzymedica.com/products/aqua-biome-phytocannabinoids-omega-3?variant=32268203982897

Right now the button looks like a rectangle with the words "View the Certificate of Analysis" This should look like all of the other yellow rectangle buttons. I put the CSS in the description section of the product page right under the html using <style></style> My code is above. Thank you in advance for your help.

0 Likes
Highlighted
New Member
6 0 0

NEVERMIND! I figured it out. I removed the CSS from the product page because I was inspecting the CSS files already included in the theme and decided I didn't need it. I also saw from inspecting a live page the CSS I was needing for my button - there were 3 classes. So I added those 3 classes and deleted the stupid "no referrer no something else" - I deleted that. I found out you should never use those on internal links! And it worked. So thanks for responding anyway. The conclusion is for anyone else wanting to do this. 

0 Likes