Jump to content

Avenue: Can you top align the images in your grid when in autocolumn mode?

Recommended Posts

1 hour ago, dzrosen said:

Site URL: https://www.dzrosen.com/

Does anyone know how to top align the index grid images in Avenue when you do autocolumns instead of the default layout? Attached is a screenshot and I just want the top of the grid to be aligned per the red line. Please let me know!

Screen Shot 2021-03-22 at 5.59.48 PM.png

I can suggest a way to align masonry items using pure css, feel free to try if it work for you

Reference: CSS Masonry layouts: Responsive, Lightweight, and EASY! (w3bits.com)

/* Masonry grid */
.thumbnail-layout-autocolumns #projectThumbs .wrapper  {
  transition: all .5s ease-in-out;
  column-gap: 10px;
  column-fill: initial;
  height: auto !important;
}
.thumbnail-layout-autocolumns #projectThumbs .project .project-image img {
  position: static !important;
}
/* Masonry item */
.thumbnail-layout-autocolumns #projectThumbs .project {
  margin-bottom: 30px;
  display: inline-block; /* Fix the misalignment of items */
  vertical-align: top; /* Keep the item on the very top */
  position: static;
  -width: auto !important;
  height: auto !important;
}
/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .thumbnail-layout-autocolumns #projectThumbs .wrapper  {
    column-count: 2;
  }
}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
  .thumbnail-layout-autocolumns #projectThumbs .wrapper  {
    column-count: 3;
  }
}

image.thumb.png.b74a4ecdc73560e1daccf2f676e8c120.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.