Jump to content

Add to cart button width

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.maartenrots.nl/patron

To offer customers the possibility to sign up for a subscription with creditcard as well as with PayPal (Squarespace doesn't support PayPal for recurring payments...) I've come up with the solution to use two separate buttons below a block of text. One button is a regular button, this one links to PayPal. The other one is a product block set to display the button only. My problem is that I can't figure out how to make the add-to-cart button span the container, like the regular button does after playing around with some CSS, just for this particular page (#patron-plans).

On desktop everything looks fine, I have manually made the size of the add-to-card button to more or less the same width as the block above it. But when you switch to tablet or mobile view the button size changes, where the regular button nicely follows the width of the block above.

I would really appreciate your input and/or solutions to make this work, thanks a lot in advance.

Here's the CSS I have used (applied to #paypal-plans only):

/* Patron Creditcard Button Styling */
.sqs-add-to-cart-button{
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 2em;
	border-width: 0px;
  	background-color: #77A2AC;
	color: #fff;
} 
  
.sqs-add-to-cart-button:hover{
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 2em;
	border-width: 0px;
	background-color: #D8E8E9;
	color:#545454;
} 

.sqs-add-to-cart-button-inner {
	padding-left: 10px;
	padding-right: 10px;
}
  
/* Patron Paypal Button Styling */
  
.form-block .lightbox-handle {
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 2em;
	border-width: 0px;
	width: 100%;
	color: #fff;
	background-color: #9FC7CD;
}
  
.form-block .lightbox-handle:hover {
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 2em;
	border-width: 0px;
	width: 100%;
	color: #fff;
	background-color: #D8E8E9;
	color:#545454;
}

 

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

  • Solution

Add to Home > Design > Custom CSS

@media screen and (max-width:900px) {
section#patron-plans .sqs-add-to-cart-button {
    width: 100%;
    overflow: hidden;
}
/* button overlap right edge */
#patron-plans .product-block {
    overflow: hidden;
}
}

 

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

edit this

section#patron-plans .sqs-add-to-cart-button {
    width: 100%;
    overflow: hidden;
    padding-left: 0 !important;
}

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.