• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Full width fluid div rows in page

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Full width fluid div rows in page

This topic is: not resolved

Tagged: Div, Fluid, row, wrap

  • This topic has 13 replies, 4 voices, and was last updated 11 years, 1 month ago by samw.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 6, 2014 at 2:54 pm #83648
    neilgee
    Member

    Using the regular sample Genesis theme, how do you achieve full width fluid div rows in the middle of a page, so you can segment sections which can have color wrap backgrounds with content set to the page width.


    Neil Gee
    WP Beaches
    Coolest Guides

    January 6, 2014 at 3:33 pm #83654
    Brad Dalton
    Participant

    Try content columns http://my.studiopress.com/tutorials/content-column-classes/


    Tutorials for StudioPress Themes.

    January 6, 2014 at 5:09 pm #83674
    neilgee
    Member

    hi Brad - thanks for the reply.

    What i mean is content on the page that has backgrounds the span the entire viewport like the menus with the enclosed wrap class in Genesis.

    mock up design of full width


    Neil Gee
    WP Beaches
    Coolest Guides

    January 7, 2014 at 9:42 am #83809
    Brad Dalton
    Participant

    I think you'll find the answer here http://www.studiopress.community/topic/fullwidth-widgets-home-top-in-homepage/


    Tutorials for StudioPress Themes.

    January 10, 2014 at 9:59 am #84418
    ehassler
    Member

    @neilgee,

    Did you find a workable solution, yet? I need to accomplish the same thing, and have the solution simple enough that my client can still use the Visual editor and not deal with markup. I'm thinking of creating some shortcodes that output the containers. I'm new to Genesis, so not sure if there's an established "Genesis-way" of handling this sort of thing.

    Here's a theme that illustrates the concept: http://my.studiopress.com/themes/epik/#demo-full

    January 10, 2014 at 5:33 pm #84543
    neilgee
    Member

    @ehassler,

    Didn't really find a way to do it the way i want - which is to have all the page content within the actual page and managed via just the visual editor not via separate widgets.

    I get the idea of pre and post page content added in via widgets but that is messy for handing over to a client.

    I have ended up just using TwentyTwelve theme and making the main content div 100% and then setting up my full row wrappers and content inside divs on the page in the editor. - http://dev-wendymak.autopilotyourbusiness.com/ssr2014/


    Neil Gee
    WP Beaches
    Coolest Guides

    January 10, 2014 at 6:05 pm #84547
    neilgee
    Member

    hmmm thinking about it all you would need to do in Genesis is add:

    .site-inner {
    	max-width: none;
    }
    
    @media only screen and (max-width: 1139px) {
    	.site-inner{max-width: none;}
    }

    Which will make the inner page content widthless then just add in some regular HTML/CSS markup for the rows.


    Neil Gee
    WP Beaches
    Coolest Guides

    January 11, 2014 at 1:17 pm #84644
    ehassler
    Member

    That's close to what I ended up with, but I didn't want the client to have to deal with HTML in the editor, so I put the markup into shortcodes instead. It's still a hack, I guess, but looks better (and is easier to remember) than extra markup directly in the editor.

    The client will now see with something like this:

    [fluid_row_open]
    Content
    [fluid_row_close]
    [fluid_row_alt_open]
    More contnt
    [fluid_row_alt_close]

    May 25, 2014 at 10:57 pm #106752
    samw
    Member

    Hi

    Great tips - did you guys get this working on a page by page basis? I need to do this but only for certain pages

    setting site-inner to max width none makes the entire site that way as expected

    Neil - I saw your guide online but see that you set the whole site this way

    Any help would be appreciated thanks


    SEO & Online Marketing Consultant

    Metta3 | G+ | LinkedIn

    May 26, 2014 at 12:14 am #106764
    neilgee
    Member

    What you can do is just set up a custom body class which you can apply per post/page as required - just add the custom body class in front of the CSS rule.


    Neil Gee
    WP Beaches
    Coolest Guides

    May 26, 2014 at 4:04 am #106795
    samw
    Member

    Hi

    Thanks - I give up - I was using custom css all along - its a theme issue the site inner is not set so is 1343 by default, then the site wrap is 1140 which is getting called after the inner and then there's a hard coded entry-content div so even if you add a custom wrap size the entry content div kicks in!

    What theme did you use - I see that all of your site-inner, wrap and entry-content are 1343

    Cheers


    SEO & Online Marketing Consultant

    Metta3 | G+ | LinkedIn

    May 26, 2014 at 5:02 am #106801
    neilgee
    Member

    The theme is a generic one built straight off Genesis Framework - not too sure how you have 1343 - do you have a URL to look at


    Neil Gee
    WP Beaches
    Coolest Guides

    May 26, 2014 at 5:49 am #106803
    samw
    Member

    Hi

    Thanks...I looked at your sites in firebug and its all 1343 including the div for entry-content so I guess its the default for site width none?

    Im working on local dev so no link but using Enterprise Pro - you can see what its doing on the demo for landing page template. I have a new page template copied from the landing one but set to full width content (I have changed this to be 1140px not the 800 that's on the demo - also tried setting this to 1343 but the entry-content div kicks in!)

    http://my.studiopress.com/themes/enterprise/#demo-full

    I am only looking to add full viewport/site width coloured content boxes as divs on a few pages that will be full width....effectively creating 3 x sales/landing pages - rest of site as normal

    I could change themes but would prefer not to..

    Your sites look great by the way

    Many Thanks in advance


    SEO & Online Marketing Consultant

    Metta3 | G+ | LinkedIn

    May 26, 2014 at 10:44 pm #106909
    samw
    Member

    Hey Neil - I managed to do this via CSS - thanks for your offer of help - no doubt this is not the "best" way but it works

    after a lot of hunting around using CSS - there's a couple of ways to achieve this. No idea of the implications for mobile responsiveness or site load, so if anyone wishes to comment feel free:

    Here's how to add full browser width bars to any part of your theme/page etc using CSS & Divs - just style accordingly

    Method A - use the section class in CSS - as seen here http://codepen.io/receter/pen/uBJaK
    I haven't worked out how to get my text to format as I would like yet - centred in section but here's my css
    .section {
    margin: 0 auto;
    width: 25rem;
    background: white; (background middle if you extend text)
    padding: 20px;
    }
    .section h2 {
    color: white;
    position: relative;
    background: white; (this changes the middle of box colour behind text)
    }
    .section h2:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9999px;
    right: 0;
    border-left: 9999px solid red; (this changes box colour on left)
    box-shadow: 9999px 0 0 red; (this changes box colour on right)
    }

    Method B - Same principle different approach http://www.sitepoint.com/css-extend-full-width-bars/

    My css here

    .extendfull, .extendleft
    {
    padding-left: 3000px;
    margin-left: -3000px;
    }

    .extendfull, .extendright
    { background:#000;
    padding-right: 3000px;
    margin-right: -3000px;
    }
    .extendfull body {
    overflow-x: hidden;
    }

    Voila - coloured full width divs to use anywhere you fancy


    SEO & Online Marketing Consultant

    Metta3 | G+ | LinkedIn

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble