Phil_FD Posted January 11 Share Posted January 11 Hi All, Can someone please help. I'm really struggling trying to get the product variant and quantity all on one line on desktop. How do I get the 2 divs alongside each other on this viewport size? See screengrab attached - 'quantity' dropdown is wrapping to a new line. pw Coopers Thanks Phil Link to comment
Ziggy Posted January 11 Share Posted January 11 Can you share your website URL? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Phil_FD Posted January 11 Author Share Posted January 11 Sorry though it came through in the form, here you go. Many thanks! https://raccoon-octagon-tg8x.squarespace.com Link to comment
Ziggy Posted January 12 Share Posted January 12 I think this thread should help: Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Phil_FD Posted February 7 Author Share Posted February 7 (edited) Thanks very much for input, I've been wrestling with this for quite a while now! That link topic is very close, however from what I can tell they're putting 2 variants next to each other, then the quantity next to the 'Add to cart' button. In any case, like the original poster, the code doesn't work for me - nothing changes when the CSS is added. The only thing that has seemed to progress things is to add: .variant-select-wrapper { width:50% !important; } Which seems to get the dropdown the correct width, however it's still stacked as in the image. All I'm trying to get is the quantity dropdown to move up, I'm fine for the button to stay exactly as is. Here's the code from the link sent, with the additional lines at the end which are changing the dropdown width. Thanks so much! @media (min-width: 768px) { .ProductItemVariants { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; .ProductItem-product-price { flex-basis: 100% !important; } .ProductItem-details-excerpt { flex-basis: 100% !important; order: 2; } .product-variants { flex-basis: 100% !important; .variant-option { margin: 0 10px 0 0; } } .product-quantity-input { flex-basis: 48% !important; margin-right: 10px !important; } .sqs-add-to-cart-button-wrapper { flex-basis: 49% !important; } } } .variant-select-wrapper { width:50% !important; } Edited February 7 by Phil_FD Link to comment
Solution tuanphan Posted February 11 Solution Share Posted February 11 Add to Design > Custom CSS @media screen and (min-width:992px) { .ProductItem-details .product-variants { width: 70% !important; float: left; } .product-quantity-input { width: 28%; float: left; } .variant-select-wrapper { width: 90% !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
Phil_FD Posted February 20 Author Share Posted February 20 This worked great, thank you so much @tuanphan ! Hero. Link to comment
Phil_FD Posted April 12 Author Share Posted April 12 I've just been doing some final testing and unfortunately there's a bug with this when you click the 'add to cart' button. It then makes the button very large and hovers over the dropdowns. It only disappears once you refresh the page. Is there anything I can do to revert to the original layout? Screengrab attached. Many thanks! Link to comment
tuanphan Posted April 15 Share Posted April 15 On 4/13/2023 at 5:04 AM, Phil_FD said: I've just been doing some final testing and unfortunately there's a bug with this when you click the 'add to cart' button. It then makes the button very large and hovers over the dropdowns. It only disappears once you refresh the page. Is there anything I can do to revert to the original layout? Screengrab attached. Many thanks! Can you share link to this product? We can check easier 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
Phil_FD Posted April 20 Author Share Posted April 20 Thanks for getting back to me. It's any product, but here's an example: https://raccoon-octagon-tg8x.squarespace.com/shop/p/finca-el-paraiso-coffee Coopers Link to comment
tuanphan Posted April 22 Share Posted April 22 On 4/20/2023 at 6:02 PM, Phil_FD said: Thanks for getting back to me. It's any product, but here's an example: https://raccoon-octagon-tg8x.squarespace.com/shop/p/finca-el-paraiso-coffee Coopers Add this to Design > Custom CSS to fix problem .ProductItem-details .sqs-add-to-cart-button-wrapper { clear: both !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
Phil_FD Posted April 23 Author Share Posted April 23 Worked great, thank you so much 🙂 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment