Custom code to resize icons (image blocks) and justify on mobile version

Site URL: https://kale-lion-xs7b.squarespace.com/

Hey all 🙂

I'm building a site which includes a bunch of icons (image blocks). I set them up with spacers on desktop view and they all look good, but of course those spacers disappear on mobile view and the icons become full width. I've been manually adding padding to the literal image file before I upload them, which is inelegant but fixed a problem.

Sometimes this just doesn't cut it though. I'd love some code I can tweak for each instanch to do the following things:

• Resize images for mobile (could be sitewide, but might cause issues with other images that I want to be full-width. Perhaps something I can insert in a code block is better?)
• Justify those resized images to left or right
• Make those images appear above the text in the same block (when image is on the right it appears below the text on mobile)

Attached examples show:

• Where I've added "padding" to an image (CO2 footprint), which works but obviously could be improved. Lower priority though.
• With the quotations I can't add this "padding" in manually as there's no space.
• Screenshot with people shows how the icon appears below text but the following icon appears on top. Would like the icon to appear at the top of the block.

Many thanks in advance!

Kate

Hi. Your site is private. Can you setup password & share url again? We can check easier

Hi, thanks for replying! Please forgive my ignorance, but I'm not sure what you mean. Do you mean like the instructions on this page? I don't understand how that will allow you to view it. Do I need to do that then share with you the password as well?

4 hours ago, Rove said:

Do you mean like the instructions on this page? Do I need to do that then share with you the password as well?

Yes, exactly 🙂

When a site isn't live, it is marked 'Private'. To allow the community to view it, you'll need to set a public password in the visibility settings (following the guide) and then share this public password with us.

I hope this helps.