Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #2873226
Add to cart button appears partially off screen
Closed

Comments

  •  3
    Mani Arabi started the conversation
    September 16, 2021 at 12:47am

    When a product has a variation (ie dropdown menu), the quantity and "add to cart" buttons appear inline with the dropdown menu and often go off the screen (especially on a mobile device with small pixel width). 

    How can I make it so the quantity and add to cart buttons start on their own line? (not in the same line as the dropdown variation menu)

    edit:   sample problem URL:   www.brickarte.com/shop/#custom  quick view "sports baseplates"

  •  767
    Janilyn replied
    September 16, 2021 at 3:07am

    Hi Mani,

    Thank you for contacting WPClever Support Forum. 

    We’ve received your ticket and assigned one of our developers to help you with that. 

    He’ll be looking into your question and responding with specific instructions as soon as possible. 

    Please stay patient as we're having very heavy workloads, it might take some time for our developers to reach back.

    Best regards.

    Janilyn T. - WPClever Support Agent

  •  1,226
    Dustin replied
    September 16, 2021 at 8:23am

    Hi Mani,

    I've checked and found that you added custom CSS code and it doesn't work correctly.

    Please check the screen record video https://www.screencast.com/t/fzLklbK20 and remove "display: flex" in your CSS code.

    Best regards,
    Dustin

  •  3
    Mani Arabi replied
    September 17, 2021 at 12:10am

    Hi Dustin,

    Thanks for that clarification. I had the display: flex in order to style the "quantity" and "add to cart" buttons together (otherwise they are mismatched). How can I style those two buttons to match? 

    I tried to target .single_variation_wrap but that didn't work. :( 

    I removed the display:flex in the meanwhile to fix the dropdown menus. 

    Thx for the great support. 

  •  1,226
    Dustin replied
    September 17, 2021 at 5:49pm

    Please use below CSS code:

    #woosq-popup .cart, #woosq-popup .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
}
#woosq-popup .variations_form {
    flex-wrap: wrap;
}
#woosq-popup .variations {
    flex-grow: 1;
}
#woosq-popup .single_variation_wrap {
    flex-grow: 1;
}
#woosq-popup .quantity {
    padding-right: 10px;
}
#woosq-popup .quantity .qty {
    height: auto;
}
#woosq-popup .single_add_to_cart_button {
    margin-left: 10px;
}

    And the result (screen record video) https://www.screencast.com/t/QhUq1wj0hPOv

    Best regards,
    Dustin

  •  3
    Mani Arabi replied
    September 18, 2021 at 12:04am

    Exactly what I wanted (and a bit above my skill level). 

    Thanks again! 

  •  1,226
    Dustin replied
    September 18, 2021 at 6:33am

    You're welcome!smile.png

    If you are satisfied with our plugin and support, please reward it with a full five-star ★★★★★ rating.
    https://wordpress.org/support/plugin/woo-smart-quick-view/reviews/?filter=5
    Thank you in advance! <3

    Best regards,
    Dustin