• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Display Different Sized Header Images On Different Mobile Devices

This tutorial provides the code which enables you to display different sized logo’s at different screen widths.

Update : New solution – Different Sized Header Images For Any Screen Width – Mobile Responsive

Here’s the demo which shows you exactly what the code below produces.

Note: The above demo includes float: left; in the CSS so the logo always floats left however in the code below i have removed this declaration because this demo uses a full width header image. The CSS and image sizes will be different for smaller images and logos.

Once you add the code in your child theme, you can then add any number of different sized images and choose the screen width you want them to display at.

The images included in this tutorial represent the maximum recommended width for a specific screen width assuming you don’t want to use any left or right padding or margin.

logo-sizes

The result shows you how you can keep any text in your image centered without it being cutoff when the screen size reduces below the width of your image.

Tested on the Genesis Sample child theme by StudioPress themes.

Here’s the solution for members of WP Sites.

Register for full access

Related Tutorials

  • Different Sized Header Image On Mobiles Using Infinity Pro
  • Outreach Pro – Different Logo For Desktop and Mobile
  • Special Mobile Image After Header At Any Screen Width
  • Different Sized Header Images For Any Screen Width – Mobile Responsive
  • Change Logo On Mobiles When Genesis Responsive Menu Toggled

Header Image

Reader Interactions

Comments

  1. Dan-cer says

    January 6, 2017 at 11:36 pm

    Thank You for this tutorial. I guess it wouldn’t work when using individual image-headers for each post/page?

    Log in to Reply
    • Brad Dalton says

      January 6, 2017 at 11:39 pm

      Are your images all the same size?

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.