Support » Theme: Mesmerize » Inner Page hero image on mobile

  • I have seen this asked before, but didn’t look like there was a complete answer:

    For inner page hero, I have a ‘default’ header image specified, and have ticked the option to ‘use feature image if available’. Therefore, on pages where there is a feature image, that image should be displayed as the hero image.

    This works fine on desktop, and displays the correct header for each page, but on a mobile device it always shows the default header rather than the feature image…

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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.

    Thread Starter spwoot

    (@spwoot)

    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

    Thread Starter spwoot

    (@spwoot)

    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(http://***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?

    Thread Starter spwoot

    (@spwoot)

    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.

    Thread Starter spwoot

    (@spwoot)

    any feedback/update from the developers would be good.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Inner Page hero image on mobile’ is closed to new replies.