- This topic has 3 replies, 3 voices, and was last updated 7 years, 6 months ago by
.
-
Posts
-
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!
you can do it with a plugin such genesis dambuster or you can add a full width template like in business pro
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.
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.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.