Index gallery grid 7.0 changing to slideshow in mobile view (or keep the same grid column, or become just one single image, i am flexible!)

Hello! 

I have a grid gallery section in my index home page, with 3 images (3 columns). On desktop and tablet looks great, but on mobile version the images are stacked and I need to scroll down (one image per column). 

I would like to know if there is a way to make the gallery a slideshow just on the mobile version, or if there is a way to keep 3 column also in the mobile version. Or if is possible to just show one of the three image. 

www.aimhandmadeinitaly.com

Any help would be appreciated! 

Anna

7 hours ago, Annina said:

Hello! 

I have a grid gallery section in my index home page, with 3 images (3 columns). On desktop and tablet looks great, but on mobile version the images are stacked and I need to scroll down (one image per column). 

I would like to know if there is a way to make the gallery a slideshow just on the mobile version, or if there is a way to keep 3 column also in the mobile version. Or if is possible to just show one of the three image. 

www.aimhandmadeinitaly.com

Any help would be appreciated! 

Anna

 

You can try adding to Home > Design > Custom Css

@media screen and (max-width: 531px){
  #collection-61b2004ccc381a39ab9678be .Index-gallery-item {
    width: 33.3%;
  }
  #collection-61b2004ccc381a39ab9678be .Index-gallery-item-image img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
  }
}

Support me by pressing 👍 or marking as solution if this is useful for you

My testing

Thanks a lot! This is already much better 🙂

Is there a way to change the grid gallery on the desktop version with a single image on mobile version? Or at least making it a slideshow? So that  under the big image (vertical) i will directly see the newsletter form? 

THANKS!

14 hours ago, Annina said:

Thanks a lot! This is already much better 🙂

Is there a way to change the grid gallery on the desktop version with a single image on mobile version? Or at least making it a slideshow? So that  under the big image (vertical) i will directly see the newsletter form? 

THANKS!

 

It could be possible if you add the single image, then use CSS code to hide this image on desktop breakpoint and show on mobile