Grid gallery: resizing the images on mobile

Hi guys! Need a little help here!

I would like my images in the grid gallery (on mobile only) to have the same width as my content. Tried to show it in the screenshots... 

Do you guys know how to make it happen? Thanks

site: https://papaya-sealion-7c66.squarespace.com/
password: template

Hey @abbiericher
It looks to me like the gallery frame itself is going to 100% but you prevented the gallery from cropping your images so it won't fill your image frame. Is that an option to set e.g. a 3:2 aspect ratio?

 

22 minutes ago, ArminB said:

Hey @abbiericher
It looks to me like the gallery frame itself is going to 100% but you prevented the gallery from cropping your images so it won't fill your image frame. Is that an option to set e.g. a 3:2 aspect ratio?

 

Hi @ArminB! I really love the style on desktop and would like to keep it that way. If I let the gallery crop my images, then I would not have the same look on dekstop... 

Is it possible to allow the cropping so that on mobile it would be full width and then tweak the proportions on desktop to make it look like it is now? I'll allow the cropping for now so you can test it on your side.

I'm just starting in coding so if you could help me, that would be awesome! Thanks

13 hours ago, abbiericher said:

Hi @ArminB! I really love the style on desktop and would like to keep it that way. If I let the gallery crop my images, then I would not have the same look on dekstop... 

Is it possible to allow the cropping so that on mobile it would be full width and then tweak the proportions on desktop to make it look like it is now? I'll allow the cropping for now so you can test it on your side.

I'm just starting in coding so if you could help me, that would be awesome! Thanks

Sure!

1) Duplicate the section
2) style the second one for mobile
3) then grab the following CSS and add to WEBSITE > WEBSITE TOOLS > CSS
4) Open the Web Inspector of your browser and Identify the "Section ID's (there are many tutorials online ) e.g. by @WillMyers and install an "ID Finder browser extension for Squarespace"

(you are looking for the section ID - (blue underlined in the screenshot) of your browser

The CSS will hide the desktop page on mobile and the mobile page on desktop.
 

@media only screen and (max-width: 840px) { [data-section-id="6316e5cad00d3d666ad24772"]{display:none}}

@media only screen and (min-width: 840px) { [data-section-id="6316e5cad00d3d666ad24772"]{display:none}}

5 hours ago, ArminB said:

Sure!

1) Duplicate the section
2) style the second one for mobile
3) then grab the following CSS and add to WEBSITE > WEBSITE TOOLS > CSS
4) Open the Web Inspector of your browser and Identify the "Section ID's (there are many tutorials online ) e.g. by @WillMyers and install an "ID Finder browser extension for Squarespace"

(you are looking for the section ID - (blue underlined in the screenshot) of your browser

The CSS will hide the desktop page on mobile and the mobile page on desktop.
 

@media only screen and (max-width: 840px) { [data-section-id="6316e5cad00d3d666ad24772"]{display:none}}

@media only screen and (min-width: 840px) { [data-section-id="6316e5cad00d3d666ad24772"]{display:none}}

 

Great! Thank you! Didn't think about hiding sections. Everything looks like I wanted now.