Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#26856 closed enhancement (fixed)

Twenty Thirteen: Adjust background size of header image(s) with media query

Reported by: senlin's profile senlin Owned by: lancewillett's profile lancewillett
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

Although I realise that there are a few similar tickets already, @obenland recently suggested on my blog to open a ticket for this.

In the file inc/custom-header.php I suggest to add media queries for two breakpoints, 360px for smartphones and 768px for tablets.

For these two media queries I have made the background-size 1px bigger than the query. I am not entirely sure whether I should or not, my reasoning merely is the fact that the highest breakpoint is 1599px and the minimum image width is 1600px; I could be completely wrong about this, so please correct me if that is the case.

Gist of file: https://gist.github.com/senlin/6380825#file-custom-header-php-L66-L79

Attachments (3)

26856-adjust-background-size-header-images.diff (1.5 KB) - added by senlin 11 years ago.
Adjust background size of header image(s) with media query
before.png (608.7 KB) - added by lancewillett 11 years ago.
Before patch
after.png (480.9 KB) - added by lancewillett 11 years ago.
After patch

Download all attachments as: .zip

Change History (15)

#1 @nacin
11 years ago

  • Component changed from Themes to Appearance

#2 @obenland
11 years ago

  • Component changed from Appearance to Bundled Theme
  • Keywords needs-patch added
  • Summary changed from adjust background size Twenty Thirteen header image(s) with media query to Twenty Thirteen: Adjust background size of header image(s) with media query

#3 follow-up: @lancewillett
11 years ago

  • Milestone changed from Awaiting Review to 3.9

@senlin Can we help you make a patch here in the format Trac expects? I'd be happy to show you how it works.

#4 in reply to: ↑ 3 @senlin
11 years ago

Replying to lancewillett:

@senlin Can we help you make a patch here in the format Trac expects? I'd be happy to show you how it works.

Yes, that would be much appreciated Lance

#5 follow-up: @lancewillett
11 years ago

@senlin I'm lancewillett on Freenode IRC if you want to chat there (#wordpress-themes), or email me lance at simpledream.net and we can go from there.

#6 in reply to: ↑ 5 @senlin
11 years ago

Replying to lancewillett:

@senlin I'm lancewillett on Freenode IRC if you want to chat there (#wordpress-themes), or email me lance at simpledream.net and we can go from there.

I have no idea what IRC is and therefore sent you an email from piet at senlinonline

@senlin
11 years ago

Adjust background size of header image(s) with media query

#7 @senlin
11 years ago

  • Keywords has-patch added; needs-patch removed

#8 @obenland
11 years ago

  • Milestone changed from 3.9 to Future Release

Let's keep working on it and see if it might be something for 4.0

#9 @lancewillett
11 years ago

  • Keywords needs-refresh added
  • Milestone changed from Future Release to 4.0

#10 @guavaworks
11 years ago

Testing @WordCamp OC, works fine.

#11 @lancewillett
11 years ago

  • Keywords needs-refresh removed

Tested in IE7, IE8, and IE9 to confirm it doesn't break in IE browsers.

#12 @lancewillett
11 years ago

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

In 28701:

Twenty Thirteen: adjust background size of header image(s) for small devices. Props senlin, fixes #26856.

@lancewillett
11 years ago

Before patch

@lancewillett
11 years ago

After patch

Note: See TracTickets for help on using tickets.