Jump to content

Maca Template: dropdown width for products

Go to solution Solved by tuanphan,

Recommended Posts

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

Screenshot 2023-01-11 at 12.58.26.png

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

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 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

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 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 4 weeks later...

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;
}


 

Screenshot 2023-02-07 at 22.34.03.png

Edited by Phil_FD
Link to comment
  • Solution

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

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

Link to comment
  • 2 weeks later...
  • 1 month later...

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!

Screenshot 2023-04-12 at 22.58.09.png

Screenshot 2023-04-12 at 22.58.02.png

Screenshot 2023-04-12 at 22.57.55.png

Link to comment
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!

Screenshot 2023-04-12 at 22.58.09.png

Screenshot 2023-04-12 at 22.58.02.png

Screenshot 2023-04-12 at 22.57.55.png

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

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

Link to comment
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

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

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.