Support » Themes and Templates » (Twenty Fourteen) Content Spacing and Margin Width

  • I’d like to widen the content and sidebars so it covers the entire screen rather than this wide black margin on the right of the screen. It just makes my site look disproportional. If someone could give me some code to enter into CSS that’d be great- I’m useless with code and have no idea what to input haha!

    My site is http://www.vendorculture.com

    Thanks,

    Jordan Osborne

Viewing 6 replies - 1 through 6 (of 6 total)
  • The div you are having issue with is your .site

    There are 2 solutions, but the problem is on line 821 of the stylesheet.

    To make the whole site 100% of the screen, replace the original

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

    with

    .site {
    background-color: #fff;
    position: relative;
    }

    (you are removing the set width)

    To center the content to make it look better, replace the original style with

    .site {
    background-color: #fff;
    max-width: 1260px;
    position: relative;
    margin: auto;
    }

    Thanks!

    You will lose all custom code if you modify the theme files directly and update the theme in the future.

    Add your custom CSS either through the theme Customizer, a Child Theme style.css file, or via a Custom CSS plugin.

    Using either of the above methods, to correctly remove the max-width, you would need to set it to none, like so:

    .site {
        max-width: none;
    }

    Hope this helps.

    Thanks for your help guys, but unfortunately the coding you both offered didn’t work. It’s probably my inability to code. Perhaps I’m entering it into the wrong places. I tried entering the code into both the ‘Edit CSS’ section on my website’s customize section and on the stylesheet for my theme on the ‘Editor’ section.

    As I’ve mentioned previously, I’m clueless with coding. Is there anyway you could simplify the process? I had a similar problem with my site when I started it and the user who helped me with the coding then managed to solve the problem and it was a lot simpler than it is now.

    I can see a max-width:none on line 821, is that what you put in?

    CSS “cascades”, which means any styles that apply to an element get overridden by styles applied to it lower on the file. It looks like you didn’t remove the original “max-width: 1260px” which is now on line 825.

    Since the .site element it receiving max-width:none on line 821 and max-width:1260px on line 825, it chooses max-width:1260 since it is lower in the file. Hope that makes sense. Your max-width:none isn’t working because it is being overridden.

    You need to either remove the “max-width: 1260px;”, you should be able to find/replace it, or you can set your max-width:none to important so it won’t get overridden. To do this, go back to your code and replace “max-width: none;” with “max-width: none !important;”

    Cheers!

    Ok, I see what you mean. I’ll give that a try and see how I get on.

    My content has been centred which looks a lot better, but I’ve still been left with the black margins on both sides. Could you help me get rid of these?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘(Twenty Fourteen) Content Spacing and Margin Width’ is closed to new replies.