Different gallery types for desktop and mobile

Hey!

I'm sure this gets asked a lot but was just wondering if theres a simple way to have two different gallery types for desktop and mobile? Currently have it set to slideshow: simple for desktop and want to change mobile to have a single row scroll like grid: simple or grid: masonry with the original image aspect ratio being left alone (instead of it cropping). Attached what I'm trying to change on just mobile but with more spacing between the images.

Thanks!

The easiest way is add 2 Galleries, then we can give code to show 1 on desktop, show another on mobile

Another way is set Gallery Slideshow then we can give code to change it to Grid on Mobile

Hey Tuanphan,

I have the same Problem and want to change the Gallery Type on mobile only.

Can you share the Code to show 1 gallery on desktop and show another one on mobile?

Thank you! 🙂

Hey Tuanphan,

Same here. The page I would need a desktop and other mobile gallery on, is already live, so can you share the code beforehand or do you need it ready with the two galleries?

Another question, none of the slideshow galleries adapt to landscape pics on the mobile version -> is there any way i can incorporate some code where, when it's a landscape pic, the frame adapts?

Thanks! Francis

16 hours ago, FabianTeppich said:

Hey Tuanphan,

I have the same Problem and want to change the Gallery Type on mobile only.

Can you share the Code to show 1 gallery on desktop and show another one on mobile?

Thank you! 🙂

Can you share link to page where you added? We can check easier

Hi Tuanphan,

I also asked if you could help me with something similar to this, but sent it to your inbox. Just letting you know in case you miss it. 

Thanks! 

hi tuanpham,

i have issues with spacing and ratios of pictures between desktop and mobile on certain subpages (model test, commercial) and i think that would be an interesting fix

the only thing is that i'm using a blank section with inserted images as gallery itself does not allow me to have the desired size of images on desktop (even with inset option they are too big when there are 2 columns).

would it be possible to display the blank section with inserted images solely on desktop while the gallery would be on mobile? 🙏😍

my page is https://patrycjahelenabielawska.squarespace.com/
 

thank you

Does anyone know if the code used for this specific to each individual page? The Custom CSS box doesn't seem to be linked to any particular page, so I assumed it would apply the changes site-wide, but it doesn't seem to. 

On 7/24/2023 at 12:37 AM, patrycjahelena_ said:

hi tuanpham,

i have issues with spacing and ratios of pictures between desktop and mobile on certain subpages (model test, commercial) and i think that would be an interesting fix

the only thing is that i'm using a blank section with inserted images as gallery itself does not allow me to have the desired size of images on desktop (even with inset option they are too big when there are 2 columns).

would it be possible to display the blank section with inserted images solely on desktop while the gallery would be on mobile? 🙏😍

my page is https://patrycjahelenabielawska.squarespace.com/
 

thank you

 

You mean show this blank on desktop and show grid under blank on mobile?

14 hours ago, DionS said:

Does anyone know if the code used for this specific to each individual page? The Custom CSS box doesn't seem to be linked to any particular page, so I assumed it would apply the changes site-wide, but it doesn't seem to. 

Can you share link to page where you have problem? We can use ID to target individual page only

3 hours ago, tuanphan said:

You mean show this blank on desktop and show grid under blank on mobile?

hey. so the way i had to build my 'gallery' was inserting blank section, and then image blocks within this section, so each picture is a separate block

i opted for this way as inset gallery (simple grid) with 2 columns generates pictures that are simply too big for desktop. 

however, the display on mobile is far from ideal and i was thinking that disabling this so-called blank section with inserted images on mobile and instead enabling a normal gallery section for mobile only would improve the mobile experience.

You can add this to Design > Custom CSS to hide image gallery grid on mobile

/* hide gallery grid mobile */
@media screen and (max-width:767px) {
	[data-section-id="64b67ddeef13745794ebdbcc"] {
		display: none !important;
}
}

To find data section id in the next case, use this free tool

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff