• 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

Reduce Site Header Size When Header Image Decreases On Mobile Screens

This solution resizes the site header as the screen width reduces. In some themes like Foodie Pro, the header image is coded to using background-size: contain; ( Demo ) so the image isn’t cutoff when the screen width decreases to less than the width of the header image.

The only problem is the height of the site header is set so as the image decreases, the gap increases like you see in the following screenshot taken at a width of 700px:

On mobile phones, thats a significant chunk of the screen which is white space.

The solution in this tutorial, removes the gap so you get this :

Tested using the Foodie Pro child theme.

Here’s the demo video showing how your header looks at different screen widths. In this case the padding and margins are only removed after the screen width hits 750px width.

#Demo Video

Shows the header image and site header resizing so there’s no gaps.

Register or login to access the full solution :

Register for full access

Foodie Pro Theme Header Image

Reader Interactions

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.