Content spanning screen width

  • Hi All. I’m trying to get my page to span the entire width of the screen. I’m using a child theme of the twentyfourteen theme. Currently my page spans about 95% of the width of the screen, then all content (header, main content, footer, etc) stops and the body background color displays for the remaining 5% (until the edge of the screen). When I do an inspect element on the page, I see that the element:

    <body class="home page page-id-2 page-template-default logged-in admin-bar no-customize-support header-image footer-widgets grid">

    Spans the entire width of the screen (without any padding or margin). The line immediately after:

    <div id="page" class="hfeed site">

    Is identical, except the right-most 5% of the screen is shaded as margin. I would imagine this is the element I need to edit?

    If I view the Styles of that element, there is an entry:

    media="all"
.site {
background-color: #fff;
max-width: 1260px;
position: relative;
}

    If I change that max-width to something higher than 1366 (my current screen resolution), the 5% right-most margin disappears. But when I copy the above code and insert it at the very end of my style.css, the margin remains. What am I doing wrong? I would like a CSS entry to replicate the max-width edit I am making within inspect element.

    Thanks in advance.

Viewing 15 replies - 1 through 15 (of 15 total)

  • What is your site address ?

    Thread Starter cag8f

    (@cag8f)

    theseasonssamui.com

    do it this way max-width: 1366px !important;

    Thread Starter cag8f

    (@cag8f)

    OK thank ou. I tried that but there was no change. I should maybe note that I am now using a screen with a width of 1920, and the right margin is even more prominent.

    Your theme is left aligned . So there is no way you can hide it . YOu can only change its color to white . Secondly i noticed that the theme is not responsive so there will be margin either white or grey

    Thread Starter cag8f

    (@cag8f)

    Sorry I’m a little confused. From inspect element, I can edit the max-width property of the .site class and increase the width of the page to fill the screen. Why can’t I carry out the modification via an edit to my style sheet?

    Thread Starter cag8f

    (@cag8f)

    That should read, “Why can’t I carry out the SAME modification via an edit to my style sheet?”

    Rather then adding the code to bottom add it just after
    /* =Theme customization starts here
    ————————————————————– */ in your file

    Thread Starter cag8f

    (@cag8f)

    OK thanks. I tried that, but there was no change.

    Thats Working for me . Are you using any cache plugin ?

    Thread Starter cag8f

    (@cag8f)

    I’m not sure–what’s a cache plugin? :-/ I cleared my browser (Chrome) data and the page remains unchanged. Same with incognito mode and Firefox.

    remove that media=”all” line

    Thread Starter cag8f

    (@cag8f)

    Aha, that worked, thank you very much. I’ve now removed the media-all line, removed the “!important”, and moved the code back to the bottom of the style sheet, and it still works. I SWEAR I previously had this exact code in the exact same place, but to no avail. This has happened to me a few times now (making an edit that should definitely work, only to have my browser not recognize the edit). I keep hearing about cache clearing–might that be related? Shouldn’t viewing my page in incognito mode alleviate that issue? Maybe not…

    NOW, the header does not stretch all the way to the edge of the screen. That should be a relatively easy fix I think?

    use the element .site-header
    Rest is same

    Thread Starter cag8f

    (@cag8f)

    Great thanks a lot for your patience. I’ll monitor this cache-clearing business to see if I spot any more instances where it possibly affects me.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Content spanning screen width’ is closed to new replies.