Jump to content

Grid gallery: resizing the images on mobile

Recommended Posts

  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment
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}}

 

Bildschirmfoto 2024-01-19 um 10.41.43.png

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com

Link to comment
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}}

 

Bildschirmfoto 2024-01-19 um 10.41.43.png

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.