How to specify CSS code to only apply to homepage

  • Hi,
    I needed to increase the width of the text on my homepage. I wanted it to go across the whole page after getting rid of the sidebar. I did it with this in my child-theme’s style.css

    p {
    width: 150%;}

    Now the product descriptions on my single product page is also wider and goes out of the screen.
    https://www.lfots.com

    My question is: How can I write the CSS code so that it only applies to homepage?

Viewing 5 replies - 1 through 5 (of 5 total)

  • The statement you are using will target all paragraph elements. You could try testing for the front page and placing an inline style on the element. 

    <p   <?php  if (is_front_page()) { echo style='width:150%'; } ?> >
    Thread Starter ANo.1

    (@ano1-1)

    Thank you mrtom414,
    Do I add this also to my style.css? It doesn’t work, when I do.

    Thread Starter ANo.1

    (@ano1-1)

    Well after a whole day I am much more educated. However, from how I understood it, this should work, and it doesn’t

    p.site-main {
width: 150%;
}

    Can anyone explain to me why not?

    Thread Starter ANo.1

    (@ano1-1)

    Ok, it seems this thread doesn’t make much sense, sorry for that. I forgot to say that it is a woocommerce page. Finally I solved it with changing .page-description right in woocommerce.css, hoping to remember it after an update (solving the overriding problems in child-theme is beyond my skills at the moment.)

    Hi!

    In your specific case, you can target the homepage using the .home class.

    Example:

    .home .site-main p {
font-size: 2em;
}

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to specify CSS code to only apply to homepage’ is closed to new replies.