Equal Height Logo & Header Right Widget Content On Desktops

The code in this download folder enables you to display your header image & a image in the header right widget area at equal heights on desktops.

On mobiles, the images will scale down to fit the size of the site header without leaving any space.

This way your images won’t be cut off on smaller mobile screens as seen in the following demo video.

Demo Video #

Shows the header image ( logo ) & image in the header right widget area displaying with equal height on desktops and scaling down to fit mobile screens without cutting off any part of the image.

This solution has been written to work with the Enterprise Pro child theme by StudioPress however the method used will work in any theme.

Installation Steps #

There’s 2 steps :

Step 1 – You’ll find the following code between lines 39 – 44 in functions.php. In this example, the values for the height & width have been set at 150px by 300px as seen in the following code example :

Step 2 – Paste the CSS from style.css to the end of your Enterprise Pro child themes style sheet and clear caching.

Download Folder