Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Gallery image size on smaller screens



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?


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

Edited by Mynty
Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 0

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

{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)


I hope that helps!

Link to comment
  • 0

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

Create an account or sign in to comment

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

  • Create New...