WordPress.org

Make WordPress Core

#25013 closed enhancement (wontfix)

Twenty Fourteen: Improve support for larger viewports

Reported by: nhuja Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

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.. :)

Attachments (2)

ticket25013.patch (1.4 KB) - added by eherman24 20 months ago.
Increased width to 100%, Dropped down sidebar
text-overlap.png (757.8 KB) - added by eherman24 20 months ago.
text overlap on scale example

Download all attachments as: .zip

Change History (19)

comment:1 @rmccue20 months ago

  • Component changed from General to Bundled Theme
  • Summary changed from The demo doesn't seem to extend 100% to Twenty Fourteen: The demo doesn't seem to extend 100%

@eherman2420 months ago

Increased width to 100%, Dropped down sidebar

comment:2 @eherman2420 months ago

  • Keywords has-patch added
  • Version set to trunk

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.

Last edited 20 months ago by eherman24 (previous) (diff)

comment:3 @eherman2420 months ago

  • Keywords needs-testing added

comment:4 follow-up: @MikeHansenMe20 months ago

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.

comment:5 in reply to: ↑ 4 @eherman2420 months ago

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

comment:6 @iamtakashi20 months ago

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.

comment:7 follow-up: @eherman2420 months ago

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.

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. 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)

Last edited 20 months ago by eherman24 (previous) (diff)

comment:8 follow-up: @MikeHansenMe20 months ago

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.

comment:9 in reply to: ↑ 8 @eherman2420 months ago

  • Keywords has-patch needs-testing removed

comment:10 @celloexpressions20 months ago

  • Keywords needs-patch added
  • Summary changed from Twenty Fourteen: The demo doesn't seem to extend 100% to Twenty Fourteen: Improve support for larger viewports

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.

comment:11 in reply to: ↑ 7 @iamtakashi20 months ago

  • Keywords needs-patch removed
  • Summary changed from Twenty Fourteen: Improve support for larger viewports to Twenty Fourteen: The demo doesn't seem to extend 100%

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.

comment:12 follow-up: @eherman2420 months ago

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.

Last edited 20 months ago by eherman24 (previous) (diff)

@eherman2420 months ago

text overlap on scale example

comment:13 in reply to: ↑ 12 @iamtakashi20 months ago

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?

comment:14 @eherman2420 months ago

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

Last edited 20 months ago by eherman24 (previous) (diff)

comment:15 @celloexpressions20 months ago

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

comment:16 @SergeyBiryukov20 months ago

  • Keywords needs-patch added
  • Summary changed from Twenty Fourteen: The demo doesn't seem to extend 100% to Twenty Fourteen: Improve support for larger viewports

comment:17 @lancewillett20 months ago

  • Keywords needs-patch removed
  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.