Summary block loses its gutter width in tablet view

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

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

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

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