Shopify Store Slideshow Image Is Different From Desktop To Mobile

Store Design
, , , ,
1

Hello, I really need some help the slideshow on my Home page - the images are a good size but when you look at it on your phone is completely wrong.

Custom CSS on the [SlideShow]

.slider {
  margin: auto;
  height: 600px;
  width: 600px;
}
.slider-buttons {
  margin: auto;
}
@media screen and (max-width: 576px) {
  .slider {
    margin: auto;
    justify-content: center;
  }
}

This is the website link:

https://www.ecocharm.co.uk/

This is a duplicate post because the old post was being sent messages that weren’t helping the problem.

2

Hi @EcoCharm

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1701221862341.png
PageFlyRichard_0-1701221862341.png390×844 79.9 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

@EcoCharm - please add this css to the very end of your base.css file and check

@media screen and (max-width: 576px){
#shopify-section-template--20060244836686__1bd5f0e0-3c94-4c48-8f64-89a3f35ee156 .slider{
justify-content: unset !important; max-width: 100% !important;
max-height: 100% !important;}
}
4

@suyash1 - Thank you very much for your help.

5

@PageFly-Richard - Thank you very much for you help.

6

@EcoCharm Glad that i can help. LEt me know if you have any questions