jmjeffri 0 Share Posted December 31, 2013 (edited) 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! Edited August 10, 2016 by edokken Link to post
Llamablue1570047703 0 Share Posted January 1, 2014 (edited) 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. Edited January 1, 2014 by Llamablue 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 post
jmjeffri 0 Author Share 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. Link to post
edokken 1 Solution Share 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 Link to post
Recommended Posts