Spacing problem betwenn products in the mobile view of my store

Hi,

SQSP support couldn't help me with this so it's over to you genius folk !!

I'm having a spacing problem in the mobile view of my Store (the "Shop" page). I'd like to keep the 1-column mobile view but add more space after the ADD TO CART /PURCHASE buttons to differentiate between the products. It is currently not clear to the user which product/service is adding to the cart (the one above or below). 

Other workaround options could be to draw a line after each button or add a thin ruby red #91256 box to surround each of the 5 products/services & button.

I've checked some of the forum solutions where others have had similar issues but couldn't get the example Custom CSS code to work in my Store. 

Any clever folk out there able to assist an Irish solopreneur struggling with the subtleties of SQSP?

Thanks in advance.

Brian

https://cobalt-amphibian-475k.squarespace.com/   pword: sandyford

2 hours ago, btgwebb said:

I'd like to keep the 1-column mobile view but add more space after the ADD TO CART /PURCHASE buttons to differentiate between the products.

You should be able to add more space with the following CSS. That saud, I personally prefer the box (solution above).

@media screen and (max-width: 767px) {
    .products.collection-content-wrapper .grid-item {
        margin-bottom: 84px;
    }
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Magic ... Thanks so much @Lesum and @paul2009. I like the box solution so much that I wouldn't mind the red box available on the desktop version also.

Could you possibly tweak the code to accommodate desktop view also? ...

and round the corners like I have done in the section above (size 20).

Thank you.

@btgwebb Here's the updated code:

.products.collection-content-wrapper .grid-item.is-loaded {
	padding: 15px !important;
	border: 1px solid #B91256 !important;
	border-radius: 20px !important;
}

 

Thank you! @Lesum