WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. richardbkk
    Member
    Posted 10 months 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?

    Thanks

  2. esmi
    Forum Moderator
    Posted 10 months 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
    Member
    Posted 10 months 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
    Member
    Posted 10 months ago #

    Botanet,

    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
    Member
    Posted 10 months ago #

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

    http://www.findurlaptop.com/tech/2013/08/04/customize-header-of-twenty-thirteen-theme-in-wordpress/
    http://www.findurlaptop.com/tech/2013/08/23/responsive-header-background-wordpress-twenty-thirteen/

    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
    Member
    Posted 10 months ago #

    tgnp,

    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
    Member
    Posted 10 months 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
    Member
    Posted 10 months 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 */
    }

    thanks

  9. richardbkk
    Member
    Posted 10 months ago #

    Thanks Botanet!

  10. goeslikeschnell
    Member
    Posted 7 months 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
    Volunteer Moderator
    Posted 7 months 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
    Forum Moderator
    Posted 7 months 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?

Reply

You must log in to post.

About this Theme

About this Topic