WordPress.org

Forums

Corpo
How to position main content to edge? (7 posts)

  1. endtheme
    Member
    Posted 8 months ago #

    Hi,

    I am using the full-width template for a specific page. I want to have a section in my main-content to be flush with the white background of the corpo theme, just like it is for the slider on the homepage.

    What CSS would I add to the element to achieve this, negative margins?

  2. Hey there,

    You got a link to the exact page?

    Makes it easier to look as the demo site on WP.org doesn't appear to have a full-width template in use. :)

    Take care.

  3. endtheme
    Member
    Posted 8 months ago #

    Unfortunately I do not have a link to the exact page as it is not live yet. Only available locally :/

  4. endtheme
    Member
    Posted 8 months ago #

    I think what I am trying to do is ignore the 20px left and right padding of #wrapper for only a specific div inside #content-wrapper. I want this specific div to have a different background color that goes all the way to the edge of the wrapper instead of having the white 20px padding.

  5. Bojan - WPMU DEV Support
    Member
    Posted 8 months ago #

    Hi there, endtheme! I think I can help you.

    First, look for this code in your CSS file:

    #content-wrapper section {
    margin: 32px 0 0;
    padding: 0 0 32px;
    background: url(images/divider.png) repeat-x bottom left;
    }

    Now, you need to delete, comment out, or change both the margin and the padding, the latter of which would give you something like this:

    #content-wrapper section {
    margin: 0;
    padding: 0;
    background: url(images/divider.png) repeat-x bottom left;
    }

    The margin is what's dropping your content below the header, and the padding is eliminating the space between the content and whatever is going live under that content, in the next div down. If you find that having either set to 0 is too extreme, you can change the numbers in the original bit to get just the look you want.

  6. endtheme
    Member
    Posted 8 months ago #

    Hello, and thank you for the reply.

    If I set the the content-wrapper section to 0 margin and 0 padding then I lose the padding for all the divs within the content-wrapper, while I only want it gone for a specific div within the wrapper. I am basically trying to add a full-width widget (lets call it widget X) that has a different background color and stretches to the edges of the content-wrapper, but all the other widgets above and below it need that default margin.

    Now I tried using negative margins for widget X and it didn't work.

    Is the only way to go about this to set the content-wrapper padding and margin to 0, and then reset padding and margin back to its default values in each child div respectively, except for in widget X?

  7. Bojan - WPMU DEV Support
    Member
    Posted 8 months ago #

    If that particular div has its own indicator, that could be fairly simple. You can also have it apply to only the first instance of that particular indicator, like so:

    #content-wrapper section:first-child {
    margin: 0;
    padding: 0;
    background: url(images/divider.png) repeat-x bottom left;
    }

Reply

You must log in to post.

About this Theme

About this Topic