Different headers for different screen sizes

  • anx

    (@anx)


    10 years ago

    I am using the theme twenty thirteen version 1.4 with WP 4.1.1
    I have a header image that works fine for bigger screens. However, on smaller screens the resized image does not work with the header text.
    I have tried to make customized images, name them the same as the auto-generated images and upload to the same file via FTP but nothing changes on front-end.
    Any ideas how to do this (using a child theme of course)?

Viewing 3 replies - 1 through 3 (of 3 total)
  • CrouchingBruin

    (@crouchingbruin)

    Can you please post a link to your site? Offhand, I think the best way to do this would be to add a media query that changes the header image to your modified image at mobile screen widths. For example:

    @media only screen and (max-width: 767px) {
   .header-main {
      background-image: url(/images/new_header.jpg);
   }
}

    This would change the background image when the screen width goes under 767px, which is the width of an iPad.

    Where exactly would I insert the above snippet?

    Either create a child theme and add it to the end of your child theme’s style.css file, or use a CSS plugin like Jetpack or Custom CSS Manager. The plugin is the easier route. And you want to use the .side-header class for the selector, not .header-main if you’re using the Twenty Thirteen theme. I just used .header-main as a general example in the post above.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Different headers for different screen sizes’ is closed to new replies.