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.

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.

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.

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