Jump to content

Image blocks (card) tiling effect

Recommended Posts

Site URL: https://www.omarhasandesign.com/work/levarti-nkth7

Hello,
I'm trying create a layout similar to the image attached, using a combination of image cards aligned left and right to create a tiled effect. Currently, in edit mode I have created a layout similar to the attached image but when I publish it, the section with the text doesn't appear (I assume this is because I am not selecting an image to accompany the copy?)
When I preview in edit mode the desired design is visible,  but in mobile view the empty image space is visible and creates a big gap.

To create this tight grid effect I've used the built in style settings to adjust the image separation and the image width (green circle in image attached) However this made the padding between inline images above uneven. I used some custom css to try and adjust this and not sure is this the best way to go about this as it doesn't transfer well to mobile either.

I've tried using text boxes and spacers too but it's difficult to get the tile effect even this way and the spacers also appear on mobile view.

Code used below:

//Margin for image blocks//
.sqs-block { 
    margin-left: 0px; 
    margin-right: 0px; 
    margin-top: -20px; 
    margin-bottom: -20px; 
    } 
 

https://www.omarhasandesign.com/work/levarti-nkth7

pass: squarespace_help

Thank you!

Squarespace_help1.jpg

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

I think I have solved it, for anyone interested - Maybe someone who knows more can suggest if this is the best way to do it. My coding is very limited.

Using this combination of code, style settings (to adjust the image separation) and not displaying captions on inline images I've managed to get equal distances between all images.

//padding for image blocks//
.sqs-block.image-block {
 padding-top:0px !important; padding-bottom:10px !important; padding-left:0px; padding-right:0px;
}


 

squarespace_edit.jpg

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.