Jump to content

Spacing problem betwenn products in the mobile view of my store

Go to solution Solved by Lesum,

Recommended Posts

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

add space after ADD TO CART and PURCHASE buttons.png

Link to comment
  • Solution

@btgwebb You can try adding this code snippet under Custom CSS to create a thin ruby red (#B91256) box surrounding each product

@media only screen and (max-width: 767px)  {
	.products.collection-content-wrapper .grid-item.is-loaded {
		padding: 15px !important;
		border: 1px solid #B91256 !important;
	}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
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  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
Posted (edited)

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.

round corners size 20 and box around desktop also.png

Edited by btgwebb
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.