Help Needed: Preventing Banner Image from Flashing on Mobile

[Felix_Ghys]

Hi everyone,

My site is fully built with a desktop-first approach, and I used custom coding (with help from this community) to hide the banner image when the site is viewed on mobile. 

However, when the site is opened on a mobile device, the banner image still briefly appears for about 0.2 seconds before disappearing. This flash can be distracting and may negatively affect user experience.

Ideally, I want the banner image to be completely hidden on mobile without showing at all, since it doesn’t scale well and the mobile version of the site looks much better without it.

Does anyone have suggestions on how to prevent this banner image from flashing when the page loads on mobile? I'd really appreciate any advice or guidance on how to fix this.

website link: https://matubucoffee.be/

Thanks in advance for your help!

[Laza_Binaery · Accepted solution]

Hi @Felix_Ghys 

Try this:

• in that banner section, under Custom CSS , add 

.image-section {
    display: none;
}

@media (min-width: 769px) {
    .image-section {
        display: block;
    }
}​

This code is for just that section and it should help with flashing on mobile.

• and also remove code from theme-index.css 

@media (max-width: 768px) {
    .image-section.image-section--template--19897395708229__694cf2ae-142b-4bd4-8155-40f7816be418.image-section--large.wow.animated {
        display: none !important;
    }
}
}​

note it had an extra } there, also. 

[Felix_Ghys]

Thank you so much! 

This worked like a charm.