Question 46076 in CSS Question posted in
Some basic documentation can be found here.

I need to make this page full width, but I can't figure out the CSS to change

Firstly, the site is behind a membership, so I can’t direct you to it, but I can explain in detail.

The wordpress site in question has a page that displays a timeline which is loaded from external javascript.

When I use Chrome console to inspect the code, I find that the CSS that controls the result I want is found in <div class="site-inner"> and the change comes when I alter the width. Here is the CSS that’s found for site-inner:

.site-inner {
    clear: both;
    margin: 200px auto;
    max-width: 100%;
    padding: 20px;
    width: 960px;
}

If I uncheck width: 960px; I get the result I’m looking for, however, if I make that change in the theme’s custom CSS editing area, it affects the entire site (all pages and posts), and not just that page.

I do have the option to define a custom class for the body or content on that page when editing in WordPress, but I can’t figure out why when I create that custom class, then define the CSS for that class in the custom CSS for the theme, that the change doesn’t occur for that page.

If, for example, I defined timeline in the body field for the post as the custom CSS class, then add to the theme’s CSS:

.timeline {
    width: unset;
}

-or-

.site-inner .timeline {
    width: unset;
}

Nothing happens. I don’t really know what I’m doing, so I’m just poking holes until something works. What I do know is that the only way I’ve been able to model the change is by altering what’s found in .site-inner above.

Any ideas?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Strangely enough, I figured it out, although I don't know if it's exactly what's needed.

    I added both a custom body and custom content class to that post only. One I called .content-timeline and the other .body-timeline accordingly. After reloading the page, I confirmed that .body-timeline was now found in the <body> tag of the HTML.

    Then, I started tinkering with the CSS in console and I came up with...

    body.body-timeline .site-inner {
    width: unset;
}

    ...which seems to work.

    Yay me?


  2. 0

    Not sure if this is the problem, but your classes are the wrong way round in your second example, it should be:

    .timeline .site-inner {
    width: unset;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search