WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 18 months ago

#24194 closed defect (bug) (fixed)

Twenty Thirteen: non-responsive layout in IE8

Reported by: jrbeilke Owned by: phpmypython
Milestone: 4.1 Priority: normal
Severity: normal Version: 3.6
Component: Bundled Theme Keywords: good-first-bug has-patch commit
Focuses: accessibility Cc:

Description

Testing Twenty Thirteen with 3.6 beta and I'm getting scrollbars when resizing the window in IE8 less than 1060px wide.

Attachments (2)

twentythirteen-ie8noresponsive.jpg (140.8 KB) - added by jrbeilke 3 years ago.
Fixing_responsive_in_ie8.patch (624 bytes) - added by phpmypython 21 months ago.
diff

Download all attachments as: .zip

Change History (15)

#1 follow-up: @RDall
3 years ago

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

IE8 doesn't support media queries so it can't be responsive like the theme is in other browsers.

See here: http://caniuse.com/#feat=css-mediaqueries

#2 @SergeyBiryukov
3 years ago

  • Milestone Awaiting Review deleted

#3 in reply to: ↑ 1 @whyameye
22 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

Replying to RDall:

IE8 doesn't support media queries so it can't be responsive like the theme is in other browsers.

See here: http://caniuse.com/#feat=css-mediaqueries

While IE8 does not support media queries out-of-the-box, it does appear that the theme is intended to work responsively in IE8, as it is responsive in IE6.

You can test this yourself in Browserstack by visiting:
http://twentythirteendemo.wordpress.com/

Last edited 22 months ago by whyameye (previous) (diff)

#4 @obenland
22 months ago

  • Milestone set to Awaiting Review
  • Version set to 3.6

#5 follow-up: @obenland
22 months ago

  • Keywords good-first-bug added
  • Milestone changed from Awaiting Review to Future Release

It looks like it's caused by the very first style in css/ie.css. It was introduced with the initial commit.

As far as I can see, removing it shouldn't break too many things (IE7/8). A path would be trivial, but it should be tested thoroughly.

#6 in reply to: ↑ 5 @whyameye
22 months ago

Thanks for this feedback. So far, experimenting with commenting out the line you suggest fixes the problem without causing other problems. For now to solve this I've set up a child theme which loads in the alternative ie.css with the line commented out and prevents the original ie.css from being loaded.

Replying to obenland:

It looks like it's caused by the very first style in css/ie.css. It was introduced with the initial commit.

As far as I can see, removing it shouldn't break too many things (IE7/8). A path would be trivial, but it should be tested thoroughly.

#7 @phpmypython
21 months ago

  • Focuses accessibility added
  • Keywords has-patch added

That is the fix that needed to be added and i tested and got no problems in ie8.
Hopefully this is all that we need

#8 @obenland
21 months ago

  • Keywords needs-testing added

#9 @DrewAPicture
20 months ago

  • Owner set to phpmypython
  • Status changed from reopened to assigned

#10 @lancewillett
18 months ago

  • Milestone changed from Future Release to 4.1

Let's test the patch one more time and get this fix in for 4.1.

#11 @zrothauser
18 months ago

Tested and it's still working.

#12 @lancewillett
18 months ago

  • Keywords commit added; needs-testing removed

#13 @lancewillett
18 months ago

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

In 30386:

Twenty Thirteen: fix non-responsive layout in IE8. Props phpmypython, fixes #24194.

Note: See TracTickets for help on using tickets.