• 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

Genesis Responsive After Header Featured Image 100% Width

This code enables you to add the featured image after the header using width:100%;

This displays the image full width regardless of the original image size, covering the entire after-header div in any Genesis child theme.

The solution also enables you to add a fallback image using the customize > After Header setting added using the code in the download folder.

On top of that, this tutorial extends the functionality in this tutorial by enabling you to add a different image which can be displayed at any screen width which is good for mobiles.

Demo Video #

Shows the responsive featured image after the header in the Genesis Sample child theme by StudioPress.

Installation #

There’s only 2 steps relating to usage of the code in the download folder for registered users.

Step 1 : Add the PHP code from the functions file to the end of your child themes functions file.

Step 2 : Copy & paste the CSS below to the end of your child themes style.css file and clear caching.

You can then add a fallback image named img.jpg to your child themes images folder or and change this image using the customize > After Header setting.

Register or login to access the download folder :

Register for full access

Related Tutorials

  • Special Mobile Image After Header At Any Screen Width

After Header Image Featured Image

Reader Interactions

Comments

  1. Debbie Hastings says

    August 24, 2018 at 1:42 pm

    PERFECT! You’re the best! Worth every penny!!

    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.