Jump to content

Blog grid - phone view spacing

Go to solution Solved by tuanphan,

Recommended Posts

On this blog page:

in mobile view, I have used this code to make the posts display in 2 columns:

@media only screen and (max-width: 767px) {
  .blog-basic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 14px;

  .blog-basic-grid--container img {
    width: 100% !important;
    height: auto !important;

It works, except the gaps between the posts are huge (as per the screen shot) and I can't find a way of adjusting these?

Any help would be very gratefully received.  Thank you!

Screenshot 2023-06-13 at 15.05.28.png

Link to comment
  • 8 months later...
21 minutes ago, ThisWayToFabulous said:

@tuanphan what if we're trying to minimize the space between the title and the image? Trying to make it more apparent which post the title goes with.


Screenshot 2024-02-26 at 7.16.51 AM.png

Use this CSS code

@media screen and (max-width:767px) {
.blog-article-spacer {
    height: 1px !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.