Twenty Fourteen: Improve support for larger viewports

[nhuja]

Shouldn't the content width extend 100% to the browser width?

In addition, I think the theme will look better if we add some breathing space. I am a minimalist fan and this one looks a bit crowded all over.. :)

[eherman24]

Increased width to 100%, Dropped down sidebar

[eherman24]

I have adjusted the width to stretch the entire screen size, and dropped the sidebar down on mobile devices and made responsive. I added the patch as an attachment, I'm not sure how to submit a patch.

[MikeHansenMe]

Attaching the patch here is correct. It looks like you patch has duplicate max-width: 100%; on line 522, 523. As far as full width layout, I am not a huge fan. It can make the content lines really long on large monitors (1920px). Would be good to discuss in todays theme chat.

[eherman24]

Replying to MikeHansenMe:

Attaching the patch here is correct. It looks like you patch has duplicate max-width: 100%; on line 522, 523. As far as full width layout, I am not a huge fan. It can make the content lines really long on large monitors (1920px). Would be good to discuss in todays theme chat.

I will do my best to be there for that. Thanks for the feedback Mike

[iamtakashi]

With the same reason MikeHansenMe mentioned above, I don't like the idea of making the theme to expand 100% to the browser width. The main content area can be really wide on a bigger monitor and it would make difficult to read. Twenty Fourteen is meant to be a magazine theme and readability is crucial for a content-heavy site (any website really).

My personal rule of thumb is that around 55 to 75 characters per line including space is comfortable to read, and I designed the base theme (Further) along with the rule.

I'd vote to leave as it is - having a maximum 1260px wide.

[eherman24]

While I do agree with both you in regards to readability , having a completely responsive site requires the ability to scale up as well as scale down.

Having a large dead area of white space to the right of the header and content area is less than ideal. Maybe moving forward we discuss scalability of the theme in regards to larger monitors. (sorry if this was discussed in the theme meeting today, unfortunately I couldn't make it as I needed to be at a work meeting)

[MikeHansenMe]

One alternative that was mentioned during the meeting was moving the max up to 1600px and increasing the font size so it is still readable. WHile still in favor of leaving it at 1260 (this is wider than most). The above is a reasonable alternative.

[celloexpressions]

On those lines, we could bump up the font size, as well as potentially the sidebar width(s), and extend the largest breakpoint to around 1600px.

Twenty Thirteen's post format background colors extend to 1600px, then there is a solid background color beyond that. I think it's worth finding a way to style the theme out at least that far to truly support the higher end of responsiveness. It should be totally possible to maintain the appropriate characters per line. We could also try things like multiple columns (CSS3 columns), but that's considerably more ambitious.

If the theme itself can extend that far, we can also remove the custom background UI, which is a big plus.

[iamtakashi]

Replying to eherman24:

As it sits right now it is only scalable up to 1260px wide. Anything wider results in the entire site left justified with a ton of dead space that does not match the theme.

Having a large dead area of white space to the right of the header and content area is less than ideal.

I would call it as "margin" rather than "dead space" and I don't see the necessity to fill the all the space available. In my opinion, a fluid layout is much difficult for users to make their site look good because of image size and font size etc.

[eherman24]

One minor issue I have run in to with the twenty fourteen site, is as you begin to scale down the width of your browser window and the 'Featured Content' at the top begins to scale down, text starts to become overlap with the content below, but only for a breif moment in between break points.

It is a minor issue, but one I caught as I was playing with the dimensions. I believe this happenes at around '1244px' for the first content box, and at '1144px' for the second content box.

I've attached a screenshot for a better understanding of what I am talking about. There is also probably a better location to be bringing up an issue such as this, so sorry if I am in the wrong location.

[eherman24]

text overlap on scale example

[iamtakashi]

Replying to eherman24:

There is also probably a better location to be bringing up an issue such as this, so sorry if I am in the wrong location.

Like you suspected, the issue would be better to be reported in a separate ticket. Let's focus on the original topic here. Could you open a new ticket about the issue?

[eherman24]

Sorry about that. I've opened up a new ticket, regarding the new issue, here #25033

[celloexpressions]

Was reverting the summary and keywords in comment:11 accidental (looks like a simultaneous edit conflict)? I think that summary is broader/more appropriate.

[lancewillett]

Discussed at length in Twenty Fourteen office hours today. Decide on wontfix, and authors can use Custom Background color and image to style the right margin to blend differently with the design if they'd like (it's a light gray by default).

​IRC log