Inner Page hero image on mobile

Hello,

Can you please, specify in what page are you having this kind of issue?

Please, provide me the link for your page in which you are having problems with, so I can be able to help you.

Hi,

thanks for your response.

It’s on all inner pages. I have a ‘default’ inner hero image specified, and also have checked the ‘use feature image if available’ option.

It works fine on desktop, but on mobile (and just shrinking the browser size on a desktop does the same thing) the default hero image gets displayed, even when there is a feature image for that page.

It’s a staging site, so I can’t post a direct link – i can send you a link via email so you can see for yourself, but it’s on all inner pages and i’ve explained the problem above. Other people have reported it and it’s probably quite easily reproduceable…

thanks

This seems to be the culprit. If you inspect the element, you can see there is a css override where screen width less than 767px, which forces the ‘default’ header to be used…

@media screen and (max-width: 767px)
.custom-mobile-image:not(.header-slide) {
    background-image: url(https://***redacted***/wp-content/uploads/2018/05/default-header-image-01.jpg) !important;
}

Not sure where this comes from, may be some one from mesmerize can advise?

Some more info for the mesmerize support guys:

This is the code causing the issue – in inc\header-options\background=options\background-type\image.php – around line 100.

<style type="text/css" data-name="custom-mobile-image">
	/*Custom mobile image*/
	<?php if($bgImageMobile): ?>
	@media screen and (max-width: 767px) {
		.custom-mobile-image:not(.header-slide) {
			background-image: url(<?php echo esc_url_raw(  $bgImageMobile) ?>) !important;
		}

	<?php endif; ?>
	}

This where the mobile hero image on inner pages gets (incorrectly) set back to the default image, overriding the feature image.

I can comment this out and confirm it then works correctly, but needs a more permanent fix.

any feedback/update from the developers would be good.