Twenty Thirteen
Different Headers for Different Screen Sizes Twenty Thirteen (14 posts)

  1. richardbkk
    Posted 2 years ago #

    I love the new twenty thirteen theme. Great for my users who are older and so the screen size text is great.

    I tried to use CSS to make header responsive, but it then doesn't suit the site qropsspecialists.com on mobile.

    I want to write different headers for the different screen sizes. i.e. upload a different header for mobile, tablet, PC, etc.

    Is this possible?


  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes.

  3. Botanet
    Posted 2 years ago #

    Hey richardbkk,

    After creating a child theme for your site add this on your child theme style.css

    @media (max-width: 643px) {
    .site-header .home-link {
    	color: #141412;
    	display: block;
    	margin: 0 auto;
    	max-width: 1080px;
    	min-height: 50px;
    	padding: 0 20px;
    	text-decoration: none;
    	width: 100%;

    Happy editing :)

  4. tgnp
    Posted 2 years ago #


    I am having the same issue as the OP and applied your media queries code to my child theme's style.css. But it appears that all it does is change the height of the header image on a mobile browser. It doesn't resize the actual image itself.

    The OP's site header (linked above) resizes according to browser width. Can you please tell us how you did it, OP?

  5. richardbkk
    Posted 2 years ago #

    It didn't look like I hoped on mobiles. If you are happy for header to resize you can use these:


    However, I am going to manually resize the headers and reload them for the various screen sizes as that would give the tailored solution I want, so that the text in the header is bigger on mobile screen sizes as just a resized header is not giving a satisfactory solution for smaller screen sizes.

  6. Botanet
    Posted 2 years ago #


    The above coding is for "richardbkk" to make his header responsive on the mobile.

    To get your issue sorted you need to create your own thread.

    Thanks and happy editing :)

  7. richardbkk
    Posted 2 years ago #

    Hi Botanet,

    I wanted different headers for different screen sizes not a resposnive header. That is a different question. Please read my original question again. Thanks.

  8. Botanet
    Posted 2 years ago #

    Hi richardbkk,

    You can do different headers by using media queries.

    Your header for mobile

    @media only screen and (min-width : 320px) and (max-width : 480px) {
     /* style here */

    Your header for tablet

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
    /* style here */


  9. richardbkk
    Posted 2 years ago #

    Thanks Botanet!

  10. goeslikeschnell
    Posted 2 years ago #

    NOTE - The below changes should be made in a Child Theme - do not modify theme files directly.

    This is a bit of a complicated fix, but it does actually fix this issue and the image resizes dynamically based on the screen size.

    1) Create a clear PNG that is 1600px by230px
    2) Upload this image somewhere accessible
    3) in the header.php file insert an image call like this:

    <header id="masthead" class="site-header" role="banner">
    		<img src="URL_OF_IMAGE.png" class="clearfix">
    				<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

    4)in custom-header.php change the background-size to 100%

    .site-header {
    			background: url(<?php header_image(); ?>) no-repeat scroll top;
    			background-size: 100%;

    5) In style.css add a new line in 4.1 Site Header

    .site-header .clearfix {
    	width: 100%;

    Essentially what's going on here is the clear image acts as a retainer for the space where the header image is.

    This will not work for sites that have the tagline copy in use as it bumps all that down to the next line. In my case, I had this embedded in the header image and didn't need the tagline.

  11. WPyogi
    Forum Moderator
    Posted 2 years ago #

    @goeslikeschnel - any of these changes should be made in a child theme - do NOT modify theme files. Note added to your post above.

  12. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    @goeslikeschnell, Thanks for taking the time to post that, but it'll encourage people to edit the theme's files and we (I assume you know) know what'll happen when the theme updates.

    Could you post a suggestion that involves a Child Theme?

  13. soasmw
    Posted 1 year ago #

    @goeslikeschnell, your method does not seem to work. I did as you suggested, but the mobile theme displays only the central part of the original header image.

  14. soasmw
    Posted 1 year ago #

    A simple edition in header.php in the child theme works. Add the "100%"command twice for the background.

    <header id="masthead" class="site-header" role="banner" style="background-size:100% 100%;>

    The second time you say 100%, you are referring to the mobile screens. So if you want the header image to appear smaller there,you could decrease the percentage, this will however result in space between the image and the nav menu. The best thing in such case is to edit the header image altogether.


Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic