Jump to content

Blog home page title and image spacing alignment - NEED HELP

By B_Lundquist, in Site Design & Styles

Go to solution Solved by tuanphan,

Recommended Posts

B_Lundquist Level 2

B_Lundquist

Posted
Posted

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

  • Replies 1
  • Views 734
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

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 { displ

Posted Images

  • Solution
tuanphan Level 18

tuanphan

Posted
  • Solution
Posted

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!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources