Jump to content

Add to cart button width

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
  • Views 1.9k
  • Created
  • Last Reply

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.