Jump to content

Images via code blocks // Can I level them all out like a grid?

Recommended Posts

Site URL: https://abba.squarespace.com/gallery

My site is basically finished but I need help on this one last thing!

I created a custom store by using code blocks for individual images, with the corresponding product blocks under each image. (Image attached)

There are 11 pages and about 100 separate code blocks. This is the code in each code block...

<a href="image-url" class="MagicZoom">
    <img src="image-url"></a>

Then I place the product block under.

Some pages look fine, others look way worse. I just want everything aligned neatly like a grid. Is there a way to tell each code block image to be certain dimensions? Maybe one master code? Even If I have to edit all 100 blocks, it's ok. I just don't want to have to resize and re-upload all my images one by one to the custom files.

All I'm looking for is a nice clean grid! 🙂

Last note: I have this in the custom header for each page in the gallery. Could this be messing with something?

  .product-block .productDetails .product-title {
    font-family: 'scrubby', alternative-web-safe-font;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.4em;
    font-size: calc(.24vw + 1rem);
    padding: 0

If someone could please please help me! I'm SO CLOSE to the FINISH LINE!

Many thanks,


Screen Shot 2022-01-05 at 3.42.01 PM.png

Screen Shot 2022-01-05 at 3.52.42 PM.png

Link to comment
  • Replies 0
  • Views 178
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

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.