@Media Query displaying incorrectly on mobile - Narrative Theme

Store Design
1

We recently edited code for the Narrative Theme to display a different Slideshow hero section on our website’s homepage for Desktop vs Mobile. The desktop version works flawlessly but for some reason the mobile version displays a snippet of the section at the top of the page above the header (see image).

The only code updates for this were in Assets → theme.scss.liquid

@media only screen and (max-width: 767px) {
#Slideshow-1656530296a06a838e {
display: none;
}
}
@media only screen and (min-width: 767px) {
#Slideshow-16565303112d55f900 {
display: none;
}
}

Could someone please let me know if they have a fix for this? The website is www.wingandfinapparel.com

unnamed.jpg
unnamed.jpg1242×2120 131 KB

Many thanks,

Danny

2

hi @DanT74 ,

If you want hide on Mobile device can you use:

@media only screen and (max-width: 767px) { #Slideshow-1656530296a06a838e { display: none; } }

And hide on the Desktop device:

@media only screen and (min-width: 768px) { #Slideshow-16565303112d55f900 { display: none; } }

Additionally, when i’m check on your web site, the css not still implement yet.

3

Hello @DitalTek

Thank you for your reply. The code you’ve listed is the same as the code that is already in place (see original post). The issue is that with this code, the section is not completely hidden on Mobile devices (see original post image). Do you know a solution to this?

Best,

Danny

4

hi @DanT74 ,

Does you have implement that code in the your theme?