Gallery view changes on mobile

Site URL: https://www.julia-marco.com/

Hi ,

For the 3 last projects in my website I selected a gallery view where you click to "next / prev" images with the navigator, so you only see one image at the time. It works on the laptop view however when it displays on the mobile they display on a scroll down view one on top of each other.

Is there any way I could also have them presented with the "prev/next" navigator instead of the scroll down? It makes it messy  seeing all the images just piled up. 

Thanks

Which page are you referring to? I don't see it on homepage

I think I have a similar issue. I'm using (and want to keep op using) the slideshow reel gallery type on the desktop view. But then on the Mobile view you only get to see a sliver of the image. I'd like to use the Grid: Strips gallery type when on Mobile view. Is there a possibility for this.

ps: small extra question, is there a way to create some spacing between images when slideshow reel gallery type on the desktop view?

Much appreciated.

18 hours ago, ChristofferA said:

I think I have a similar issue. I'm using (and want to keep op using) the slideshow reel gallery type on the desktop view. But then on the Mobile view you only get to see a sliver of the image. I'd like to use the Grid: Strips gallery type when on Mobile view. Is there a possibility for this.

ps: small extra question, is there a way to create some spacing between images when slideshow reel gallery type on the desktop view?

Much appreciated.

Can you share link to page where you use gallery, we can check easier

I don't know if I can share it since im still in trial mode. But I don't want to commit to paying when I'm not sure if it might work in the end or not...

On 9/21/2022 at 4:44 PM, ChristofferA said:

I don't know if I can share it since im still in trial mode. But I don't want to commit to paying when I'm not sure if it might work in the end or not...

If the site is trial/private, just setup password & share url

@tuanphan

I have a similar issue on www.theathenapack.com

i want to keep the Grid: strip style gallery on desktop. Is there a way to better represent such a large gallery on mobile?

14 hours ago, oldegray said:

@tuanphan

I have a similar issue on www.theathenapack.com

i want to keep the Grid: strip style gallery on desktop. Is there a way to better represent such a large gallery on mobile?

You mean keep Grid on desktop, change to Slideshow on mobile? Which grid are you referring to? Under Become a sponsor button or?

3 hours ago, tuanphan said:

You mean keep Grid on desktop, change to Slideshow on mobile? Which grid are you referring to? Under Become a sponsor button or?

Yes, exactly.  Yes, the grid under the sponsor button.

On 8/19/2023 at 1:29 AM, oldegray said:

Yes, exactly.  Yes, the grid under the sponsor button.

NO way to change Grid Strips to Slideshow (actually very complex)

You can add Slideshow, then we can use CSS code to change it to Grid (Simple) on Desktop.

Or you can add 2 Galleries, then we can give code to show 1 on desktop, show another on mobile

Thank you @tuanphan! I will 

12 hours ago, tuanphan said:

NO way to change Grid Strips to Slideshow (actually very complex)

You can add Slideshow, then we can use CSS code to change it to Grid (Simple) on Desktop.

Or you can add 2 Galleries, then we can give code to show 1 on desktop, show another on mobile

Thank you @tuanphan! I figured that as lovely as Grid Stips were, the code is pretty deep.

For those curious, in edit mode, I duplicated the Grid Stip gallery, edited the duplicate to be a Slideshow Reel and then designed it to be full bleed.  To swap the views on desktop and mobile, I've added this code:

// Hiding Grid Stip from Mobile, Hiding Slideshow Reel on Desktop
@media screen and (max-width: 641px) {
section[data-section-id="64d00f75a743de4c922d1bc3"] {
 display:none !important;
  }
}
@media screen and (min-width: 641px) {
section[data-section-id="64e3967c623c9120255befd7"] {
 display:none !important;
  }
}

@tuanphan Once I am in edit mode, I no longer can edit the Slideshow reel contents. Do you know a way for this to be viewable in edit mode on desktop??

Thank you!

-K

16 hours ago, oldegray said:

Thank you @tuanphan! I will 

Thank you @tuanphan! I figured that as lovely as Grid Stips were, the code is pretty deep.

For those curious, in edit mode, I duplicated the Grid Stip gallery, edited the duplicate to be a Slideshow Reel and then designed it to be full bleed.  To swap the views on desktop and mobile, I've added this code:

// Hiding Grid Stip from Mobile, Hiding Slideshow Reel on Desktop
@media screen and (max-width: 641px) {
section[data-section-id="64d00f75a743de4c922d1bc3"] {
 display:none !important;
  }
}
@media screen and (min-width: 641px) {
section[data-section-id="64e3967c623c9120255befd7"] {
 display:none !important;
  }
}

 

@tuanphan Once I am in edit mode, I no longer can edit the Slideshow reel contents. Do you know a way for this to be viewable in edit mode on desktop??

 

 

Thank you!

-K

 

 

Add edit mode class name before your code

@media screen and (max-width: 767px) {
body:not(.sqs-edit-mode) section[data-section-id="64d00f75a743de4c922d1bc3"] {
 display:none !important;
  }
}
@media screen and (min-width: 768px) {
body:not(.sqs-edit-mode) section[data-section-id="64e3967c623c9120255befd7"] {
 display:none !important;
  }
}

This code will show hide section on Outside edit mode only

On 8/22/2023 at 3:59 AM, tuanphan said:

Add edit mode class name before your code

@media screen and (max-width: 767px) {
body:not(.sqs-edit-mode) section[data-section-id="64d00f75a743de4c922d1bc3"] {
 display:none !important;
  }
}
@media screen and (min-width: 768px) {
body:not(.sqs-edit-mode) section[data-section-id="64e3967c623c9120255befd7"] {
 display:none !important;
  }
}

This code will show hide section on Outside edit mode only

You are brilliant @tuanphan thank you!