How to get CSS to work only on specific WordPress pages?

Question

I've read a few forums but I must be missing something. I'm basically just trying to have certain things in my CSS work for certain pages. Basically I wanted to change the homepage to be full width for the pictures.

My CSS in my child theme was this.

.site-content,
.fl-builder.home .page-section,
.front-page-widgets,
.breadcrumbs {
    width: 1640px;
    max-width: 100%;
   margin: 0 auto;
}

.site-footer-area {
    width: 1640px;
    max-width: 80%;
    margin: 0 auto;
}

Problem is now on all my pages since the max-width is 100% everything is touching the edge of the screen. I only wanted this for the home page. I inspected the home page and from this

<body id="top" class="admin-bar home is-singular logged-in page page-id-481 page-template page-template-_fullwidth page-template-page-template page-template-page-template_fullwidth-php customize-support">

I'm assuming my page-id is 481 for the home page.

Whats the best method to fix this so the rest of my pages are normal?

Try adding a containing div with a class to every page you want changed — pQuestions123
– pQuestions123, Commented Jun 25, 2015 at 18:53

A.B · Accepted Answer · 2015-06-25 18:55:29Z

1

you can use .home or page-id-481 as parent

.home your_selector{
 max-width: 100%;
}

or

.page-id-481 your_selector{
     max-width: 100%;
    }

answered Jun 25, 2015 at 18:55

A.B

20.5k3 gold badges43 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

St3 Over a year ago

This worked perfectly. I had to add it to each selector like @Tomek said but the .home didn't seem to work. Thanks!

Tomek Sułkowski · Accepted Answer · 2015-06-25 18:55:09Z

0

You need to prepend each of your home-related css selectors with .home, e.g.:

.home .site-content,
.home .page-section,
.home .front-page-widgets,
.home .breadcrumbs {
    width: 1640px;
    max-width: 100%;
    margin: 0 auto;
}

So if you have a css rule added to several selectors listed one after the other, you have to add .home as many times.

answered Jun 25, 2015 at 18:55

Tomek Sułkowski

7,2312 gold badges20 silver badges15 bronze badges

Comments

Kyle L. · Accepted Answer · 2015-06-25 18:56:27Z

0

When you have your different template files in your wordpress theme, make one named front-page.php and set the width of this page to 100% while leaving your other theme files alone.

such as

<div class="home-width">
    My home page
</div>

CSS:

.home-width {
    width: 100%;
}

Wordpress automatically looks for certain named pages for different things and in the Customize menu you can still decide what you want your front page to be. It also gives you complete freedom to choose the layout of your homepage while keeping the rest organized as a blog or whatever else layout you want for the site.

answered Jun 25, 2015 at 18:56

Kyle L.

6348 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to get CSS to work only on specific WordPress pages?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related