jmjeffri Posted December 31, 2013 Posted December 31, 2013 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!
Llamablue1570047703 Posted January 1, 2014 Posted January 1, 2014 The alignment looks okay to me: 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.
jmjeffri Posted January 1, 2014 Author Posted January 1, 2014 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.
edokken Posted August 10, 2016 Posted August 10, 2016 You can resize images without code using the handle on the bottom of your images within Image Blocks, or you can use Spacer Blocks to resize them. Squarespace has a super handy guide here that explains how to resize images within your site without having to use any custom code: https://support.squarespace.com/hc/en-us/articles/206566727-Resizing-an-image
Recommended Posts
Archived
This topic is now archived and is closed to further replies.