WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen Header Image on small devices wont resize (18 posts)

  1. Hydro1313
    Member
    Posted 11 months ago #

    Im using Twenty Thirteen on WordPress 3.6 and I uploaded a new header image to my site using the wordpress dashboard for the theme editor using a 1600 x 230 image. It looks perfect on a PC. But when viewing my site on an iPad or an iPhone the sides of the header image gets cropped. Quite a bit more on the iPhone. If this is a mobile compatible theme for devices then why does it not re-size the header image?

    Here is my website: https://bradleysapplianceservice.ca/

    Please help, maybe I'm missing something in my settings?

  2. Robert Bardall
    Member
    Posted 11 months ago #

    Hi Hydro,

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

    Thank you.

  3. Hydro1313
    Member
    Posted 11 months ago #

    Thanks for the reply Robert. I've updated the post and fixed my spelling errors. :)

  4. Robert Bardall
    Member
    Posted 11 months ago #

    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.

  5. Hydro1313
    Member
    Posted 11 months ago #

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

  6. Hydro1313
    Member
    Posted 11 months ago #

    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.

  7. Robert Bardall
    Member
    Posted 11 months ago #

    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: 	http://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)

  8. Bjorn Solstad
    Member
    Posted 10 months ago #

    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.

  9. Piet
    Member
    Posted 10 months ago #

    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 http://wpti.ps/?p=347

  10. Bjorn Solstad
    Member
    Posted 10 months ago #

    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.

  11. Piet
    Member
    Posted 10 months ago #

    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.

  12. Bjorn Solstad
    Member
    Posted 10 months ago #

    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.

  13. Piet
    Member
    Posted 10 months ago #

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

  14. owlsheadbiz
    Member
    Posted 5 months ago #

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

  15. vvanja4
    Member
    Posted 5 months ago #

    Hi, i have one imortant question :D 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

  16. Piet
    Member
    Posted 5 months ago #

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

  17. o3chiapremium
    Member
    Posted 1 month ago #

    I had the exact same problem, and I think I found a simple, kind of dirty solution for those who want to try it...

    in the file:
    "../themes/twentythirteen/header.php"
    line 35:
    <header id="masthead" class="site-header" role="banner" style="background-size:100%;">

    just add directly the "background-size:100%"

    worked for me!

  18. dlnsparks
    Member
    Posted 4 weeks ago #

    Thanx o3chiapremium! That worked for me as well! Quick & easy!

Reply

You must log in to post.

About this Topic