Quark template variant alignment in desktop view

12/3 quick install of quark ecommerce

See http://www.ahgoobaby.com/Redesign3/inde ... ers-detail

The 3 variant drop downs align on one line in tablet and mobile views but on desktop the 3rd drop down falls to the next line. How do I get all 3 to be on one line like the other views?

Hi

I think this dropdowns are taking too much space. Try use this code to change the layout and have add to cart elements one under the other.

Code: Select all

.vm-product-details-container .addtocart-area > form > div {
    display: block !important;
    float: none !important;
    margin: 0 auto !important;
    max-width: 380px;
    vertical-align: top;
    width: auto;
}


Ok - I made the above change, but all it does is put the variants on their own line and moves the sales price down underneath. After your change it still results in the the variant drop downs wrapping underneath one another in exactly the same as before making the change (except on it's own line).

Based on the above results, I think the left / right space allocated for variants that was originally laid out in the template was set up with enough room for one variant, but when multi variants extend the amount of space needed it wraps to the next line. After seeing the original code and looking at it after your amended code, there appears to be enough room the original location to have the multi variants all appear in one line without needing the dedicated line in your amended code. We just need to allocate more space in the template for them. As well, since the added line impacts all other products globally, it wastes prime space when I don't think it is needed. What instead is needed I think is to simply allocate more left/right space for it. Do you have a recommendation for that?

Hi

This still will not be perfect, but try this code too:

Code: Select all

.addtocart-area > form {
    width: 100%;
}

.vm-product-details-container .addtocart-area > form > div {
    float: left !important;
    margin: 0 20px !important;
    max-width: 380px;
    width: auto;
}