2

I am using the Magento 2.1.6 blank theme as a base for my own theme which is working correctly.

However, I want to add CSS code to target the home page only and not affect any other pages.

I have added this to _theme_extend.less (which I think is the correct location):

.cms-home h1, h2, h3, h4, h5, h6, p {
    padding-left: 30px;
    padding-right: 30px;;
}

However, when I go to another CMS page (which definitely does NOT have the class cms-home) it still picks up the padding and applies it. Here's a screenshot showing what the browser is rendering:

Can anyone help with what I have done wrong?

CSS output in browser

2

I think you should change:

.cms-home h1, h2, h3, h4, h5, h6, p {
    padding-left: 30px;
    padding-right: 30px;;
}

to

.cms-home h1, .cms-home h2, .cms-home h3, .cms-home h4, .cms-home h5, .cms-home h6, .cms-home p {
    padding-left: 30px;
    padding-right: 30px;;
}

to apply your css to home page only.

Please let me know if it helped.

  • 1
    That worked perfectly, thank you so much! (I had spent all morning on google trying to figure this out for myself) – Phillip Meyer Apr 25 '17 at 11:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.