Jump to content

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

Recommended Posts

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

Screen Shot 2022-05-04 at 11.31.34 AM.png

Screen Shot 2022-05-04 at 11.31.16 AM.png

Screen Shot 2022-05-04 at 11.32.42 AM.png

Screen Shot 2022-05-04 at 11.36.11 AM.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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?

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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.