Tarta
-
Posts
5 -
Joined
-
Last visited
Reputation Activity
-
Tarta reacted to creedon in Moving 'add to cart' button
@Tarta
I appreciate the offer.
A like and an up-vote are always appreciated!
Like is on lower right of a post.
Up-vote is in the upper left.
-
Tarta got a reaction from creedon in Moving 'add to cart' button
@creedon thank you so much🙏 my shop layout has improved a lot with your help!
Is there anywhere that I can leave a review or something thank you? You're so kind.
-
Tarta reacted to creedon in Moving 'add to cart' button
@Tarta
I updated my previous CSS post above.
Let us know how it goes.
-
Tarta reacted to creedon in Moving 'add to cart' button
@Tarta
If it is one or two I think that wouldn't be to hard with CSS only.
Three or more and I think you're going to need some CSS and Javascript that would dynamically assign a class to the variants based on the number of variants for the product.
Are you definitely going to have 3 or more variants now or at some point?
-
Tarta reacted to creedon in Moving 'add to cart' button
We have to take a different tack to accomplish this. I've updated the code in my previous post.
For desktop we use grid and on mobile we use flex.
Remove or comment out the following code in Design > Custom CSS.
.product-quantity-input { margin-right: 400px !important; margin-top: 0px !important }
-
Tarta reacted to creedon in Moving 'add to cart' button
I've updated my previous post. Is that the order for which you are looking?
Also you will want to remove or comment out the following CSS from Design > Custom CSS.
.product-price { order: 2 !important } .product-quantity-input { order: 3 !important } .ProductItem-details .sqs-add-to-cart-button-wrapper { order: 4 !important } .ProductItem-details-excerpt { order: 5 !important }
-
Tarta reacted to creedon in Moving 'add to cart' button
The code @tuanphan posted was for a Squarespace v7.0 site. Your site is v7.1 and requires different code.
Add the following to Store Settings > Advanced > Page Header Code Injection.
<style> /* There is something odd going on with v7.1 CSS as of 11/04/20 .ProductItem-details-checkout has a rule of display block but sub elements have order properties on them. The first bit of CSS unsets those items for a clean slate returning the elements to natural order. */ .ProductItem-details .product-quantity-input, .ProductItem-details .product-variants, .ProductItem-details .ProductItem-details-excerpt, .ProductItem-details .ProductItem-product-price, .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-ordinal-group: unset; -ms-flex-order: unset; order: unset; } .ProductItem-details .product-variants { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; width: auto; } .ProductItem-details .ProductItem-details-excerpt { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .ProductItem-details .ProductItem-additional { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } @media only screen and ( pointer: coarse ) and ( min-width: 1025px ), screen and ( min-width: 800px ) { .ProductItem-details .ProductItem-details-checkout { -webkit-column-gap: 3vw; -moz-column-gap: 3vw; grid-column-gap: 3vw; column-gap: 3vw; display: -ms-grid; display: grid; grid-row-gap: 3vh; row-gap: 3vh; -ms-grid-columns: 1fr 3vw 1fr 3vw 1fr 3vw 1fr 3vw 1fr; grid-template-columns: repeat( 5, 1fr ); } .ProductItem-details .ProductItem-details-checkout > * { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1 / 6; margin: 0; margin-right: 1vw; } .ProductItem-details .product-quantity-input { -ms-grid-row-align: end; align-self: end; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; margin-right: 0; } .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-row-align: end; align-self: end; -ms-grid-column: 2; -ms-grid-column-span: 4; grid-column: 2 / 6; width: auto; } } @media only screen and ( pointer: coarse ) and ( max-width: 1024px ), screen and ( max-width: 799px ) { .ProductItem-details .ProductItem-details-checkout { display: -webkit-box; display: -ms-flexbox; display: flex; } } </style> Let us know how it goes.
-
Tarta reacted to creedon in Moving 'add to cart' button
@Tarta
Replace your code with the following.
<style> /* begin reorder ProductItem-details-checkout */ /* There is something odd going on with v7.1 CSS as of 11/24/20 .ProductItem-details-checkout has a rule of display block but sub elements have order properties on them. The first bit of CSS unsets those items for a clean slate returning the elements to natural order. */ .ProductItem-details .product-quantity-input, .ProductItem-details .product-variants, .ProductItem-details .ProductItem-details-excerpt, .ProductItem-details .ProductItem-product-price, .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-ordinal-group: unset; -moz-box-ordinal-group: unset; -ms-flex-order: unset; -webkit-order: unset; order: unset; } /* begin change order of elements */ .ProductItem-details .ProductItem-details-excerpt { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } /* end change order of elements */ .ProductItem-details .ProductItem-details-checkout { display: -webkit-box; display: -ms-flexbox; display: flex; } /* end reorder ProductItem-details-checkout */ /* begin change spacing of ProductItem-details-checkout */ .ProductItem-details .ProductItem-details-checkout { grid-gap: 13px; gap: 13px; } .ProductItem-details .product-quantity-input, .ProductItem-details .ProductItem-product-price, .ProductItem-details .sqs-add-to-cart-button-wrapper, .ProductItem-details .variant-option { margin-bottom: 0; } .ProductItem-details .ProductItem-details-excerpt p:first-child { margin-top: 0; } /* end change spacing of ProductItem-details-checkout */ /* begin product variants two-up */ .ProductItem-details .product-variants { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 13px; gap: 13px; } /* end product variants two-up */ </style> This is for a v7.1 site and is specific to Tarta's needs.
I'm hesitant to change the spacing under the price as there is some code hidden there that will pop up when certain circumstances are met. If I change the spacing it may look even worse space wise when those conditions are met.
Let us know how it goes.
-
Tarta reacted to creedon in Moving 'add to cart' button
@Tarta
Please post a URL for one of your product pages.
If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.
We can then take a look at your issue.