• 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 Designs

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 › Design Tips and Tricks › Full Width Designs

This topic is: resolved

Tagged: 100%, full width, inner, padding, wrap

  • This topic has 3 replies, 3 voices, and was last updated 5 years, 4 months ago by ᴅᴀᴠɪᴅ.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 12, 2017 at 2:39 pm #213504
    Porter
    Participant

    I've been looking into how to properly go about creating a full width theme, and I'm a bit confused on some of the routes being taken, even by professionally done Studiopress themes.

    Why do themes use 100% width, but then have a wrapper that is a very specific pixel count? For example, Minimum Pro uses 100% width on the header, but then the wrap class is 1140px max width.

    I want a truly 100% width website (with slight padding on the sides for cosmetics), but for this to be 100% width on a phone, desktop, or retina display. Using 1140px seems silly, over say, 100% width, with a 4% padding on the "wrap". Why specify a fixed value when striving to create a flexible, adapting full width experience?

    I'm not an expert, but in my testing, nothing has broken by doing what I'm saying. If someone could clarify why so many themes are doing this over 100% and % padding, that would be greatly appreciated. Any links to related reading material, or specific Studiopress themes as well!


    Buy me a beer? | Try DigitalOcean VPS Hosting

    November 12, 2017 at 3:49 pm #213508
    oijohn
    Member

    you can do it with a plugin such genesis dambuster or you can add a full width template like in business pro

    November 12, 2017 at 4:59 pm #213510
    Porter
    Participant

    I'll check out Business Pro to see the implementation, but I'm more or less interested in the theory and design, not how to. I can do it, I've hacked apart various themes many times, I'm just seeing a common trend, and don't get why that's the method of choice, over what I described. A max width wrapper seems to defeat the purpose of full screen with variable display sizes in mind, it's kind of contradictory, IMO.


    Buy me a beer? | Try DigitalOcean VPS Hosting

    November 12, 2017 at 9:23 pm #213520
    ᴅᴀᴠɪᴅ
    Member

    I think it's because people find it easier to create a site using three break points for the content to wrap to. 800px, 1000px and 1200px or something close and are used to this method. Small, medium and large. it will obviously still be responsive to ANY size screen, but working within that container width makes it faster for creating the site.

    By having a % container with no fixed width, there's much more work involved in making sure it looks correct on different devices, especially larger widths. For example, a 1400px+ screen with a content-sidebar layout, without a fixed width wrap would stretch the content really thin and likely lead to too many words-per-line.

    So then more media queries would then need to be added in to ensure it's all readable.

    So I'm guessing theme developers add this to make it easier for people to have a common starting point.


    I love helping creative entrepreneurs build epic things with WP & Genesis.

    Follow on Twitter

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ 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

© 2023 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