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..

    Show s horizontally in a div
    table { display: inline-block; } This should work just fine for you....
    Read more

    How to vertically align html radio buttons with CSS-only in this code?

    how to write set of styles as a function in compass sass

    c# cassette - how to create different css bundles for different pages

    how to run HTML+CSS+JAVASCRIPT Project on android Emulator

    How to make the green DIV fit right after 2 upper divs?

    Preventing jquery's show/hide from adding inline style?

    My pure CSS dropdown isn't working, anybody knows how to fix it? [duplicate]

    How to make all divs same height, based on text content?

    How to make this table's height equal to the middle td's height

    how to create css gradients and shadow

    How to place a responsive background according to content height with HTML / CSS?

    how to override font-color dynamically with css color property

    How to make a dynamic layout only by CSS

    How to break a word with two 50% table cells?

    How to change background color for only one bootstrap popover

    How to make a conjoined input with flexible width

    Css Sub menu needed to show on the left not on the right of the menu

    How to position the arrow of this widget correctly?

    How can I create this complicated layout using only CSS?

    html/css - using sprite with tag - how to remove the outline in Chrome?

    Home and Contact Us tab's hover effects in my dropdown navigation menu not how I want it

    how to make certain css 3d effect works in IE

    How do nested vertical margin collapses work?

    How to properly align a page with header, nav, section and footer // HTML5 and CSS

    How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?

    How to vertically align data in the center of a table cell in HTML?

    How to change CSS style upon clicking button with JS

    How to get the max width of my css element using javascript

    how to control the css rotation of an element inside a rotated element?