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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Different Sized Header Images For Any Screen Width – Mobile Responsive

This tutorial contains the code which enables you to add any number of header of any width or height to display perfectly at any screen width. You can use CSS to change the header image at specific screen widths however this solution is better.

Here’s the demo video:

Demo Video #

This video shows how you can use different sized images which display at different screen widths in any Genesis child theme. Tested using the Lifestyle Pro child theme by StudioPress.

All you need to do is copy & paste the code in your child theme then add your images:

Works in most Genesis child themes.

Code Installation – From Download Folder #

Here’s the code and simple 2 step installation instructions fully supported for logged in members :

Register for full access

Related Tutorials

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

Header Image Lifestyle Pro Theme

Reader Interactions

Comments

  1. prngl says

    May 2, 2017 at 4:27 am

    I am trying to do this with the Wintersong child theme, where the header is on the right hand column when the screen is big, then becomes a standard header when the screen width is reduced. Having a big logo works very nicely when the screen is wide, but on a small screen like a phone, it consumes way too much space, and I would prefer a smaller logo.
    I tried this code on Wintersong, and it didn’t do anything. Are there maybe different instructions for it?

    Log in to Reply
    • Brad Dalton says

      May 11, 2017 at 11:33 pm

      It will work on most themes however Wintersong doesn’t have a header so it won’t work on that theme.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems