Jump to content

Add To Cart button on Product Pages: Center & 100% Width on Mobile?

Recommended Posts

Site URL: https://shuifeng.squarespace.com

Hello. I'm trying to get the Add To Cart button on Product Pages to be centered with 100% width on mobile. The code I have only centers it, can someone help me figure this one out? I tried using .sqs-add-to-cart-button but that only modifies the Add To Cart button in Product Blocks, not Product Pages. I tried using .sqs-add-to-cart-button-inner also and that didn't work either.

Example page: https://activefengshui.com/shop/p/what-the-feng  Password: ShuiFeng

/*Add To Cart Button on Product Pages full width MOBILE*/
@media screen and (max-width: 640px ) {
.sqs-add-to-cart-button-wrapper {
  width: 100% !important;
  text-align: center !important;
  }}
/*Add To Cart Button on Product Pages full width MOBILE*/

 

Edited by ShuiFeng
Link to comment
11 hours ago, ShuiFeng said:

I'm trying to get the Add To Cart button on Product Pages to be centered with 100% width on mobile.

Before using custom code, you may want to try the built-in Layout options that are available for Product Detail Pages on Squarespace 7.1.

  1. Open the product details page you want to edit (https://activefengshui.com/shop/p/what-the-feng)
  2. Click Edit design in the top-left corner. On some sites, you may need to hover over Edit, click Edit design, then click the Pencil icon.

3. Choose from the following layout options:

  • Simple - The product image and description display side by side, surrounded by whitespace. 
  • Wrap - The product images wrap around the description. Images are always aligned left.
  • Half - The product image splits the page with the description. The image is always aligned left.
  • Full - Product images display in a full-bleed carousel above the description.

image.thumb.png.57e47ef6e01f5f57e86faba928c7fa04.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Paul, thank you... but I have already completed choosing those options/designs (simple/stacked). But for some reason I'm unable to get the button on the Product Pages to go full width & centered on mobile. 

Edited by ShuiFeng
Link to comment
3 hours ago, ShuiFeng said:

Paul, thank you... but I have already completed choosing those options/designs (simple/stacked). But for some reason I'm unable to get the button on the Product Pages to go full width & centered on mobile. 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-details-checkout .sqs-add-to-cart-button-wrapper, .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper div {
    width: 100% !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.