Make Slideshow:Simple appear as stacked on mobile

Site URL: http://www.atelierfront.nl

Dear members,

For my website I am trying to make a simple slideshow appear as stacked images on my mobile website. Is there a piece of code or a workaround available to make this happen?

I would like the site to function the same way as this example: https://www.forstbergling.com/

Any help would be much appreciated.

Thomas

You can consider adding a Gallery Section Grid under SLideshow, then we will give code to show slideshow on desktop, show grid on mobile

Thanks for helping out Tuanphan!

So I basically make two separate gallery's: One slideshow for the website and a grid for mobile and they are just going to be below eachother on the same page. The code will determine what will show on what device. Is that correct? 

Do you already have that code available to see if that works for me?

On 8/5/2022 at 4:29 PM, tbuijs said:

Thanks for helping out Tuanphan!

So I basically make two separate gallery's: One slideshow for the website and a grid for mobile and they are just going to be below eachother on the same page. The code will determine what will show on what device. Is that correct? 

Do you already have that code available to see if that works for me?

 

Yes. You need to add it first, then we can give code easier.

Hi Tuanphan,

I've made the page; it's under www.atelierfront.nl/test

The project gibbon is the one I've used as a template, there you can find both the slideshow:simple and grid:masonry.

Furthermore I have another question. Would it be possible to have the slideshow:simple coded in such a way that it is not possible to scroll down? In other words that it looks more like a booklet than a website? Similar to this page:

https://www.forstbergling.com/fl078_h-259/nyeezn0yuts88hmkpdk82h9sto8s5i

Thanks again for your help!

On 8/9/2022 at 3:53 PM, tbuijs said:

Hi Tuanphan,

 

I've made the page; it's under www.atelierfront.nl/test

The project gibbon is the one I've used as a template, there you can find both the slideshow:simple and grid:masonry.

 

Furthermore I have another question. Would it be possible to have the slideshow:simple coded in such a way that it is not possible to scroll down? In other words that it looks more like a booklet than a website? Similar to this page:

https://www.forstbergling.com/fl078_h-259/nyeezn0yuts88hmkpdk82h9sto8s5i

Thanks again for your help!

 

Can you add both? I see 1 gallery only

https://www.atelierfront.nl/test

3 hours ago, tuanphan said:

Can you add both? I see 1 gallery only

https://www.atelierfront.nl/test

 

https://www.atelierfront.nl/test/project-two-ky966-yhgct

it’s here

15 hours ago, tbuijs said:

https://www.atelierfront.nl/test/project-two-ky966-yhgct

 

it’s here

Add a Code Block at bottom of page > Paste this code

<style>
  /* hide slideshow on mobile */
  @media screen and (max-width:767px) {
  .gallery-slideshow {
    display: none;
}
  }
  /* hide masonry on desktop */
  @media screen and (min-width:768px) {
  .gallery-masonry {
    display: none;
}
  }
</style>