15% banner images loss on Shopify mobile platform vs. desktop!

Highlighted
New Member
8 0 0

Hi all, I am pulling my hair out trying to figure out how to correct the 15% image loss on my photos banner at the top of my main shopify website. It's fine on the desktop but when I switch to mobile it cuts the sliding banner photos off by at least 15%... Does anyone have a remedy for making this more user friendly? Thank you! 

https://nwdetectors.myshopify.com/

Nwdetectors.com 

0 Likes
Highlighted
Astronaut
1087 180 213

Hello,

Essentially what happens is that it's using the CSS property background-image. Try this:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

<style>
@media (max-width:767px){
    .slideshow-background {
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
}
</style>

 


Let me know whether works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
8 0 0

Hi!

Thank you! My boss want to know if this is correct? We're a little wary about where exactly to put it....

Thanks again!

 

IMG_7394.PNG

0 Likes
Highlighted
New Member
8 0 0

Hey, I still haven't heard back from you.... Before we try your initial suggestion, my boss wanted you to take a look at this (see attachment) and make sure it was ok.

Thank you again for your help!Banner Loss 15% Help.png

0 Likes
Highlighted
Astronaut
1087 180 213

Apparently it's not: you can't use <style> within a .scss file.

I'd need a screenshot from the actual code on your page so I can double check the syntax.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
8 0 0

Hey thanks for replying! So my boss Bob says that the code is so long he doesn't know where you want him to take a screenshot let alone insert the code...  He asked if you could access it. Our site is nwdetectors.myshopify.com  He said you should be able to view all of it yourself being a shopify admin...   Please let me know your thoughts. Thanks again!

0 Likes
Highlighted
New Member
8 0 0

Actually Bob just called me and somehow he miraculously fixed it, he said to say thank you!!

0 Likes