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


Tags: html,css,wordpress

Problem :

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?



Solution :

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%;
    }

    CSS Howto..

    How to display visual rows and cols in textarea using css

    How to make hidden div slide down without affecting other elements in same row

    How to make an Image overlay the site on click?

    How do I apply a css padding to one element but not its child

    How to make sticky navigation change colour when scrolling past a certain div?

    How do I translate an image based on its height?

    How can I use a CSS3 transform on an element without stretching the text inside it?

    How to get minimal jQuery slideshow to slide properly?

    How to use Resource bundle(Client Bundle) in JSNI?

    How to style (increase the height) of select box in CSS?

    How to add CSS class attribute for Html helper methods in asp.net mvc (VB.NET)?

    css how to float or display two elements of unknown widths next to each other inside a div of unknown width

    How to create triple div border in CSS

    How to divide in 4 equal parts a li menu

    How to get the css with in inline styles using jquery

    How to make 2 level scrolling tab in CSS like this in HTML 5

    How to vertical align icon inside label and button in the same way

    How to write css for a div under a div which specific id which is itself under a div with specific class?

    How can I create a good-looking responsive image gallery WITHOUT perfectly sized images?

    How to modify the orientation of a
      spanning multiple columns?

    CSS: How to limit horizontal/vertical scrolling?

    text over horizontal line…How do I make the line gradient?

    How to achieve layout goal - Two Column

    How can i reposition a sub ul in a responsive web site

    Anyone know how to create CSS rectangle with one corner chopped off?

    How to display a button over a picture only when hovering it?

    How to style image in variable? [closed]

    How to create the equivalence of CSS “ease” in jQuery?

    How to not display css padding when span element is empty

    How to set an image when we select its sub menu