Custom small screen headers

Hello,
I have custom header images on all my pages using a plugin which works great. On the mobile version however, the photo is too small so I was wondering if it is possible to have custom small screen image for each page. I basically just want a square version of each of the custom header photos for the mobile version.

thanks!

Hi,

Thank you for contacting us. I am happy to help with your queries.

The theme’s header image is responsive and causes it to look narrower per the current screen size. Currently, there is no option to set secondary image specifically to be shown on mobile devices. But it might be worth considering in the future.

Regards,
Kharis
aThemes Support

Thanks for your response. When I go under Customize → Header Area → Header Media there is an option to add a photo to be used for smaller screens (screenshot attached. I have tested this and it does show that image on my mobile site. I was wondering if there was a way to have this smaller image be different for each page.
And if not, is there a code I can add to make my current custom header images a different size (go from a rectangular photo to more of a square)? Example attached of how I would like one of these custom photos to look like on the mobile site.

Hi,

I think you would need to add a secondary featured image for your pages. And display it from your child theme’s header.php file (duplicated from main theme’s folder) to replace this line:

<img class="small-header" src="<?php header_image(); ?>" width="1024" alt="<?php bloginfo('name'); ?>">

add add special CSS class name into it so you’d be able to manage its visiblity on a specific screen size with CSS media query.

Adding, go to this documentation for more information about child theming in WordPress.

Hope this reply helps.

Regards,
Kharis
aThemes Support