Resize Slideshow image on mobile for Athens Theme

Store Design
1

I am using the Athens Theme from shopify and i have added my slideshow image to my Page but when i go to mobile version it squishes it completely. Where in the code does it change as i can’t find anything.

Slideshow 1.png
Slideshow 1.png1475×912 82.8 KB

Slideshow 3.png
Slideshow 3.png1637×950 62.5 KB

Slideshow.png
Slideshow.png1562×870 147 KB

2

Hi can you share your store link so I can add code from inspect and send you and you can insert that code

Regards

3

Hi there, Yes it is www.hydrafixonline.com.au

Thank you very much!

4

There are two possiblities

You’re using scrolling items and these are not responsive yet ,

1st solutions is to make their height and width 100% so that these are fully adjusted on the website , try with this code

@media (max-width: 749px)

component-s…ller.css:49
.scroller-inner .grid .grid-item:not(:only-of-type) {
width: 100% ! important;
max-width: 100% ! important;}

  1. Second solutions is to show them one by one not by scrolling items, and here is the code for that

@media (max-width: 749px)

component-s…ller.css:49
.scroller-inner .grid .grid-item:not(:only-of-type) {
width: 100% ! important;
max-width: 100% ! important;
flex-flow: wrap ! important;}

put code inside this file > Component - Scroller.css

5

Is that to do with the Slideshow part? Because i don’t want that scrolling, the pictures above are not the problem just trying to make the Slideshow image fit.

6

@media (max-width: 749px)

component-s…ller.css:49
.scroller-inner .grid .grid-item:not(:only-of-type) {
width: 100% ! important;
max-width: 100% ! important;}

then use this one and let me know if it works for you