WordPress.org

Make WordPress Core

Opened 10 months ago

Closed 8 months ago

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

Download all attachments as: .zip

Change History (21)

iamtakashi10 months ago

First pass for improving the responsive pattern.

comment:1 iamtakashi10 months ago

  • Keywords has-patch needs-testing added

comment:2 follow-up: SergeyBiryukov10 months ago

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

iamtakashi10 months ago

Correct a typo in the previous patch

comment:3 in reply to: ↑ 2 iamtakashi10 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 obenland10 months ago

  • Milestone changed from Awaiting Review to 3.8

iamtakashi10 months ago

A new patch made from WordPress root directory

comment:5 buffler10 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).

buffler10 months ago

shows float issue on narrow screens

buffler10 months ago

buffler10 months ago

fixes float issue on narrow screens

iamtakashi10 months ago

Refreshed patch as the first pass at improving the responsive pattern

comment:6 lancewillett10 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 lancewillett10 months ago

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

Closing, we can open new tickets for other issues.

comment:8 lancewillett9 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 lancewillett9 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 iamtakashi9 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 lancewillett9 months ago

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

comment:12 follow-up: chriscct79 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 iamtakashi9 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 lancewillett8 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.