Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 5, 2021 at 3:13 pm #1285785
    ClimbingSocks

    Hi,
    how are you?
    On our single product page https://climbingsocks.com/produkt/klettersocken-von-climbingsocks/ I would like to make the add to cart button full width on
    1. mobile phone screens (with quantity counter above add to cart button)
    2. desktop and tablet screens (with quantity counter left from the add to cart button)
    How can I approach this?
    See also my other request here: https://kriesi.at/support/topic/edit-variation-selection-section-on-single-product-page/

    Thank you very much for further help.

    Best regards,
    Magnus

    • This topic was modified 3 years, 10 months ago by ClimbingSocks.
    March 7, 2021 at 5:37 am #1286135
    Rikard

    Hi Magnus,

    Please try this in Quick CSS for mobile:

    @media only screen and (max-width: 767px) {
.single_variation_wrap {
    margin: 0;
}
div.variations_button .button {
    min-width: 100%;
    margin-bottom: 20px !important;
}
}

    I’m not sure what you want to change on larger screens though? Please try to explain a bit further, or post a screenshot highlighting your intentions.

    Best regards,
    Rikard

    March 7, 2021 at 9:48 am #1286164
    ClimbingSocks

    Hi Rikard,
    Thanks that worked.
    On larger screens I would like to extend the button size to the right. See here: https://imgur.com/SZS5kfD

    Best,
    Magnus

    March 8, 2021 at 7:59 am #1286333
    Rikard

    Hi,

    Thanks for that. Please try this CSS as well:

    .single_variation_wrap button.single_add_to_cart_button {
    min-width: 250px;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.