Mynty Posted June 25, 2021 Share Posted June 25, 2021 (edited) 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? This is what a 1024px screen in portrait mode looks like 😞 Edited June 25, 2021 by Mynty Link to comment
ArminB Posted June 25, 2021 Share Posted June 25, 2021 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/3649084Website: www.braunsberger-media.comLeaders Lodge: See my Profile Link to comment
Mynty Posted June 25, 2021 Author Share Posted June 25, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment