Jump to content

Blog home page title and image spacing alignment - NEED HELP

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://socialkickswim.com/

Need some help please! I'm trying to get the home page of a blog site in 7.1 and set to 3 columns wide to display all images and titles with even vertical spacing. As it is, some blog titles have a 2nd line, and this means the post below it is adjusted down an extra line of spacing, but not the entire next row. This makes for a very messy looking, misaligned home page. For any given row, I'd like the vertical spacing to the next row below it to reference the lowest point of the above title text. 

Appreciate any guidance!

Screen Shot 2022-05-08 at 10.12.08 AM.png

Screen Shot 2022-05-08 at 10.12.27 AM.png

Link to comment
  • Solution

I see you used Blog Masonry Layout. Have you tried changing to Grid Layout yet?

Or add this to Design > Custom CSS

@media screen and (min-width:768px) {
div#BlogMasonryContainer {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 40px 40px;
    height: auto !important;
}
.blog-masonry .masonry-ready .entry.is-loaded {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.