WordPress.org

Make WordPress Core

#25332 closed enhancement (fixed)

Twenty Fourteen: Improve its responsive pattern

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

Description

Let's improve its responsive pattern!

The main thing is the main content area should not get wider than 474px and, by centring it with auto margins, we can simplify a lot of styles.

Also for the full-width layout (full-width page template and attachment page), we can utilise the side margins to show wider images for full-size, and move floated images (except thumbnail size) into the side margins in order to leave space as much as possible for wrapping texts.

Attachments (7)

25332.diff (33.9 KB) - added by iamtakashi 18 months ago.
First pass for improving the responsive pattern.
25332.1.diff (33.9 KB) - added by iamtakashi 18 months ago.
Correct a typo in the previous patch
25332.2.diff (33.8 KB) - added by iamtakashi 18 months ago.
A new patch made from WordPress root directory
before.png (94.9 KB) - added by buffler 18 months ago.
shows float issue on narrow screens
after.png (93.6 KB) - added by buffler 18 months ago.
clear-hentry.patch (546 bytes) - added by buffler 18 months ago.
fixes float issue on narrow screens
25332.3.diff (36.2 KB) - added by iamtakashi 18 months ago.
Refreshed patch as the first pass at improving the responsive pattern

Download all attachments as: .zip

Change History (21)

@iamtakashi18 months ago

First pass for improving the responsive pattern.

comment:1 @iamtakashi18 months ago

  • Keywords has-patch needs-testing added

comment:2 follow-up: @SergeyBiryukov18 months ago

3,6rem in line 121 looks like a typo. Should it be 3.6rem?

@iamtakashi18 months ago

Correct a typo in the previous patch

comment:3 in reply to: ↑ 2 @iamtakashi18 months ago

Replying to SergeyBiryukov:

3,6rem in line 121 looks like a typo. Should it be 3.6rem?

Well spotted, thanks for pointing out! A corrected patch attached.

comment:4 @obenland18 months ago

  • Milestone changed from Awaiting Review to 3.8

@iamtakashi18 months ago

A new patch made from WordPress root directory

comment:5 @buffler18 months ago

I think this might belong on this ticket instead of in a new one -

Might be an edge case, but before.png (attached) shows a float issue that occurs when a featured image is much taller than the title and meta to its right. Could be a few ways to approach this, but it seemed to me like the best would be to add .hentry to the 'clearing' section of style.css. I've attached a patch that does this. The result of this patch can be seen in after.png (also attached).

@buffler18 months ago

shows float issue on narrow screens

@buffler18 months ago

@buffler18 months ago

fixes float issue on narrow screens

@iamtakashi18 months ago

Refreshed patch as the first pass at improving the responsive pattern

comment:6 @lancewillett18 months ago

In 25519:

Twenty Fourteen: first pass at improving responsive patterns and allowing for a full-width layout when no secondary sidebar is present. Props iamtakashi, see #25332.

comment:7 @lancewillett18 months ago

  • Resolution set to fixed
  • Status changed from new to closed

Closing, we can open new tickets for other issues.

comment:8 @lancewillett17 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Re-opening since RTL was missed in these changes. Please update RTL to match style.css, especially in the media queries.

comment:9 @lancewillett17 months ago

In 25749:

Twenty Fourteen: merge recent stylesheet changes to RTL, and file miscellaneous CSS cleanup.

RTL still needs more responsive fixes, see #25332 -- and a11y menu fixes, see #25054.

comment:10 @iamtakashi17 months ago

Thanks for the reminder. I'm working on CSS clean-up and I'm planning to update CSS for RTL after the clean-up.

comment:11 @lancewillett17 months ago

  • Keywords needs-refresh added; has-patch needs-testing removed
  • Priority changed from normal to low

comment:12 follow-up: @chriscct717 months ago

The main thing is the main content area should not get wider than 474px

Does this also apply to the full-page (no sidebars) page templates?

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

Replying to chriscct7:

The main thing is the main content area should not get wider than 474px

Does this also apply to the full-page (no sidebars) page templates?

For text, yes.

comment:14 @lancewillett16 months ago

  • Keywords needs-refresh removed
  • Priority changed from low to high
  • Resolution set to fixed
  • Status changed from reopened to closed

Closing as Takashi is going to work on RTL separately, later.

Note: See TracTickets for help on using tickets.