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
  • Solution

Add to Design > Custom CSS

/* Mobile Blog Spacing */
@media screen and (max-width:767px) {
.blog-basic-grid .blog-title {
    margin-bottom: 10px !important;


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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.