LaurenAlaneDesign Posted July 19, 2022 Share Posted July 19, 2022 Site URL: https://laurenalanedesign.com/shop/p/leo Each of my products have drop-down menus for "size" and "quantity". I'd like to make the 2 drop-down menus appear side-by-side instead of stacked on the desktop view. On mobile, I'd like them to stay stacked, so they don't get too tiny. I also can't figure out how to make them the same width -- "quantity" always shows up smaller, even when I adjust the "form width" option in the section editor. Thanks in advance for any help you can offer! 🙂 Link to comment
Solution Beyondspace Posted July 20, 2022 Solution Share Posted July 20, 2022 (edited) On 7/20/2022 at 6:37 AM, LaurenAlaneDesign said: Site URL: https://laurenalanedesign.com/shop/p/leo Each of my products have drop-down menus for "size" and "quantity". I'd like to make the 2 drop-down menus appear side-by-side instead of stacked on the desktop view. On mobile, I'd like them to stay stacked, so they don't get too tiny. I also can't figure out how to make them the same width -- "quantity" always shows up smaller, even when I adjust the "form width" option in the section editor. Thanks in advance for any help you can offer! 🙂 Try adding to Home > Design > Custom Css .ProductItem-summary .product-quantity-input,.ProductItem-details .product-variants { float: left; } .ProductItem-summary .product-quantity-input { margin-left: 5px; /*space between quantity and variants select*/ } .ProductItem-summary .product-quantity-input input { padding-top: 9px !important; padding-bottom: 9px !important; } .ProductItem-details .sqs-add-to-cart-button-wrapper { width: 100%; } Not sure what you mean on mobile. Can you describe it more detail? Edited July 21, 2022 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted July 20, 2022 Share Posted July 20, 2022 My testing tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
LaurenAlaneDesign Posted July 21, 2022 Author Share Posted July 21, 2022 12 hours ago, bangank36 said: My testing Thank you so much, I appreciate it! Do you know how I would add some space between the "Size" and "Quantity" boxes, and make the "Add to cart" button longer? Disregard the mobile question, it turns out it isn't necessary! Thanks again! Link to comment
Beyondspace Posted July 21, 2022 Share Posted July 21, 2022 11 hours ago, LaurenAlaneDesign said: Thank you so much, I appreciate it! Do you know how I would add some space between the "Size" and "Quantity" boxes, and make the "Add to cart" button longer? Disregard the mobile question, it turns out it isn't necessary! Thanks again! I updated my previous code, kindly try it again LaurenAlaneDesign 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
LaurenAlaneDesign Posted July 22, 2022 Author Share Posted July 22, 2022 12 hours ago, bangank36 said: I updated my previous code, kindly try it again Thanks so much! That's perfect! Appreciate your help! 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