Jump to content

Gallery image size on smaller screens

Recommended Posts

Site URL: https://success-sd.com/

On the home screen I have a series of icons to links to pages on the site.  This works on most screen sizes in landscape and on mobile (see screen shots).  However, it looks wrong on a tablet in portrait mode.  Any suggestions how I might resolve this?  Is there a CSS fix?

778293914_ScreenShot2021-06-24at7_22_38PM.thumb.png.36617e728213e89f126aae2a76fb8146.png

Screen Shot 2021-06-24 at 7.24.01 PM.png

 

This is what a 1024px screen in portrait mode looks like 😞

Screen Shot 2021-06-24 at 7.32.38 PM.png

Link to comment
  • Replies 2
  • Views 266
  • Created
  • Last Reply

This is a bit too complex for a small fix but if you don't want to invest in an expert from the e.g. Squarespace Marketplace, you could try making a new section and use one image block per icon instead  (e.g. 4 in a row)
 

then you just have find the block ID for each image and use a code like this:
(for applying a max-size to the images

#block-yui_3_17_2_1_1607458165875_6808
{max-width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;}

then you would get a result like this: (keep scrolling down to the 4 icons)

https://expeditionevans.com

I hope that helps!

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

Link to comment

Thank you Armin for taking the time to respond.  The "problem" seems to be just the one screen size in portrait!  I did remove one of the icons so now only 8 and not 9 and that seems to have made a positive difference.

Is there an CSS code that when used with @media, changes the sizes of images in a gallery block that can be used?

Again, thank you for any help.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.