Jump to content

Summary block loses its gutter width in tablet view

Recommended Posts

Site URL: https://www.pamjeannephoto.com/for-creatives

Hi guys! I've tried searching for answers to this but came up unsuccessful..

I added a some customizations to my summary block excerpt (adding a background color and making them the same height), however, I noticed that after I had done this, my summary block loses its gutter when I bring it down to tablet view:



Is there a way to add a gutter using CSS and keeping it to two blog posts per row? (I'd like to avoid purchasing a plug-in if possible!)

Link to comment
  • Replies 3
  • Views 514
  • Created
  • Last Reply
7 hours ago, tuanphan said:

I see you used margin-right in desktop, you can use same way for tablet.

If you can't do this, let me know, I can give the code

Hmm I might be doing it wrong but I've attached what I currently have in my Custom CSS window for that section's media query, and I tested out adding a 15px margin-right in the Styles section of the Inspect Element window (see the two areas highlighted in the red boxes). It pushed the second grid down instead of just adding a margin between the two grids and keeping them on the same row.


I also tried adding a margin-right to the CSS section (quoted below), but all it did was crop the thumbnails instead of adding any margin or gutter. 😕

#the-blog .sqs-block-summary-v2 .summary-item.positioned {
    width: 50% !important;
    position: static;
#the-blog .sqs-block-summary-v2 .summary-item-list {
    flex-direction: row;



Thank you for your help!!!

Link to comment


This topic is now archived and is closed to further replies.

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