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:

577052363_ScreenShot2020-05-11at2_46_50PM.thumb.png.1ee849d5eaa5b4e6b9fc4f6e001c125a.png

 

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

Edited by pamjeanne
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

1702529721_ScreenShot2020-05-12at2_42_19PM.thumb.png.8e5d28b2c41204754eb656b42af288e3.png


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

if you add margin-right, You also need to adjust the width of the items, because when adding right margin, they are> 100%, so will stack

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.