Jump to content

How do I manage image alignment?

Recommended Posts

I'm new to squarespace and don't have any CSS experience (although I have found to where to enter CSS code... if I just have to paste it in, I'm good). I'm struggling to work with the alignment of my images on this page: http://verdantstewardship.com/current-projects/.

Two questions about it:

1) How can I make sure that the top two images align properly? (They look fine in the editor, but aren't lined up on the live page.)

2) How can I set the pixel width for each image so that all four on the page are filling the same amount of column space?

Explicit answers aimed at a beginner would be greatly appreciated! (Not surprisingly, I'm not working in the developer platform.) Thanks!

Link to comment
  • Replies 3
  • Views 22.8k
  • Created
  • Last Reply

  1. The alignment looks okay to me: 


  2. At the moment you have two columns and two rows. Your site is not very wide. The images automatically resize based on the browser view size (i.e. adjust for mobile).


    You could override the CSS to set a specific width e.g. width: 20%; or width: 250px;. We do a lot of these changes for customers but customisation like this usually takes a bit of CSS coding. In the Style view you can access the Custom CSS Editor.

Llamablue provides web design, web hosting, online stores and marketing strategies for businesses and specialises in Squarespace, Online stores and SME. Llamablue hosts customer websites in Australia - Adelaide, Melbourne, Sydney, Canberra, Brisbane, Sunshine Coast, Gold Coast and now in the USA and Europe. We are expanding rapidly and can help you wherever you are based. So let's talk.

Link to comment

Thanks for the feedback! I did keep tweaking it after posting the question and found an answer on another forum page earlier today that fixed it.

Apparently, I had resized just the top right photo (seasonal high tunnels) within the editing platform using the bottom toggle/handle. That seemed to override the actual photo cropping settings that I did within the image block. Once I double-clicked on the bottom slider in the editing platform, it reset back to the selections that I made in the image block. Baffling, but it worked.

The alignment of these two do still look strange in a vertical orientation in mobile (although the two in the next rows are fine), but I can live with it for now. I appreciate the help.

Link to comment
  • 2 years later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.

  • 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.