Can I make the theme full width but have margins for the content?

  • jmk909er

    #10036

    Is there a way for me to make my website go from edge to edge of the screen but the content to to have margins of say 200px on each side?

    I have attached an example of what I am after.

    Screenshot_2015_07_26_08_58_45.png

    Mod

    Kenneth John Odle

    #45192
    Quote:
    to have margins of say 200px on each side?

    You’ve got to be careful here. Computer monitors don’t function like television screens, so 200px margins on your computer could make the center portion very wide for someone with a large monitor, or very narrow for someone with a small monitor (as on laptops).

    That said, what you are asking for is really difficult, because Graphene’s header is contained within the main container that determines the width of the theme.

    IIRC, someone around here did manage to pull this off a few years ago by using a custom background, but I don’t have a bookmark for that thread. If you search the forum, you may find it.

    Moved to Support.

    jmk909er

    #45193

    OK I figured out how to make it full width and I have the column widths set at what I want but how do I center it all? See below.

    Screenshot_2015_07_26_11_45_40.png

    Mod

    Kenneth John Odle

    #45194

    My monitor is 1366px wide, and I have to horizontally scroll to see that site, which is not a good thing.

    jmk909er

    #45195

    OK I will go back to original. Thanks

    jmk909er

    #45196

    I have it set to 100px wide right now is this still too wide?

    clickmoves.com

    jmk909er

    #45197

    Sorry I meant to say 1000px wide

    Mod

    Kenneth John Odle

    #45198

    Looks fine now.

    jmk909er

    #45199

    Thanks but I see another issue. It is limiting my header size. Is this something I can add some css to remedy?

    Mod

    Kenneth John Odle

    #45200

    You could fake it with using a scrolling background.

    Basically, you make the top of your background image look like your header, and then set it to “scroll”. Kind of a hack, I admit. To accomplish a true full-width header, you’d need to use a child theme.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.