Twenty Thirteen Header Image on small devices wont resize

Hi Hydro,

Could you tell us what theme you are using, along with a link to your site if possible?

Thank you.

Thanks for the reply Robert. I’ve updated the post and fixed my spelling errors. ??

Giving it a quick look, it appears that you have set that image as the background image and set it to be a static width (background-size: 1600px) try setting the background-size property to 100% and that should fix your problem.

I’ll have another look at that when I get home and report back what I find. Thanks for the input.

I had another look and went through the settings and it is set up as a header image with no options to re-size or anything.

I’m using the built in WordPress dashboard to update the site. I figured since this theme is developed by the WordPress team then it would support a fully functional mobile theme.

Even the default header images are cropped on mobile devices.

Suppose we will have to wait till WordPress updates and fixes this major issue within the theme.

Well, the theme isn’t broken. This isn’t a bug. I’m sure the theme was designed by committee and this was how they decided it worked best.

This can be worked with. Here’s what I did:

First, I cropped the header image to cut off the white space on the left and right sides, leaving about 10-15px for padding so the image isn’t right up against the edge of the viewport.

Then, I created a child theme for Twenty Thirteen.

1. Create a new folder in the same folder as the twentythirteen folder (default: ../wp-content/themes/) named “twentythirteen-child”.
2. In this new folder, place your cropped header image, and create a new file called “style.css”
3. Paste the following into the new “style.css”:

/*
Theme Name:     Twenty Thirteen Child Theme
Theme URI: 	https://twentythirteendemo.wordpress.com/
Description: 	Child theme for the Tewenty Thirteen Theme;
Template:       twentythirteen
Author: 	Put your name here;
Author URI: 	Put your URL here
Version: 	1.0;
*/ 

@import url("../twentythirteen/style.css");

.site-header .home-link{
	background-image: url(web-logo.png);
	margin: 0 auto;
	padding: 0;
	max-width: 1080px;
	height: 230px;
	min-height: 100px;
	background-repeat: no-repeat;
	background-position:center;
	background-size: contain;
}

@media (max-width: 550px){
	.site-header .home-link{
		height: 150px;
	}
}

@media (max-width: 350px){
	.site-header .home-link{
		height: 120px;
	}
}

Finally activate the child theme and go into the customize panel. Remove the header text and header images.

You may or may not have to adjust the links in the style sheet to suit your environment.

You can adjust the height in the media queries (and add more for different sizes if you wish) to your liking. This will control the white space that appears above and below your header image when the page is resized.

This should work in all modern browsers (IE 9 and newer). For older browsers it will revert to cropping as before.
I’ve tested in Windows:
IE9, IE10
FF 23
Chrome 28
Opera 15
Safari 5

Arch Linux:
Chromium 28
FF 23

Android/Nexus 7:
Chrome
FF

Windows Phone 8:
Lumia 920 (IE)

I just noticed this to after I started using the theme on 3 of our sites and turned off the text in the header to be able to make a corporate look.

There should be at least three versions to upload images to when you look at header under appearance.

The child-teme is a showstopper for any DYI’ers out there that just wants to have a great looking site or blog.

This is a major issue. Twentythirteen is supposed to be “perfect” being one of the default themes.

It’s a petty, because this is one of the greatest free or payed themes I have seen.

I just posted a “how to” on making responsive images for the 2013 header image. It’s a part 1 (which only deals with media queries, so no real resizing of the images yet) and I’m working on part 2 now.
If you’re interested you can read it at https://wpti.ps/?p=347

Nice post. I solved the issue by centering the important stuff in the image and then testing on both iPad and mobile until I got it right.

Does your solution also remove the whitespace behind the image (over and under), so it looks correct?

You need to fix your G+ sharing button in the end of the post, Piet. I tried to use it and add a comment before sharing, but it goes away when I try to write something, and the share button dissapears too.

Hi Bjorn, yours is also a way of doing it ??

Yes, with my solution I adjust the CSS too, so there is no white space under it (I never noticed above).

Thanks for the heads up on the G+ button, I need to check on that.

I started out first with trying to do what you have done, but I realized that 12 years out of the loop of design was not the best starting point to fix things myself.

The solution I landed on, was to get that arrow on the left side to point down at the sharing buttons without moving. The header occupies around 50% of the screen real estate on my Gallaxy S3, so I can live with that.

just finished part 2: https://wpti.ps/?p=355 where I show how to serve different sized images for the media queries set in part 1

Thanks, Piet – I am reviewing your how to posts now.

Hi, i have one imortant question ?? probably my gramatics is bad but you will understand me. Anyway, im working on new site and using Twenty Thirteen theme and can you please tell me how can I change dimensions of pages? (without child theme)

please help me

@vvanja4 you need to open a new thread as your topic is completely unrelated to this one.