button styling on cart page mobile

  • Resolved dyin

    (@dyin)


    4 years ago

    Hey,

    I am having a styling issue with the plus and minus. It is showing above and below the number iso left and right.
    It is doesn’t really matter on large screens but on mobile screens it looks strange in the shopping cart.
    Is there a way I can fix it?

    my website: baniwafels.be

    Thanks for your help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter dyin

    (@dyin)

    4 years ago

    Or as alternative I could maybe make them disappear on the cart page with media width <650px. But I can’t figure out the correct “display: none;” for it.

    • This reply was modified 4 years ago by dyin.
    Thread Starter dyin

    (@dyin)

    4 years ago

    Disregard,

    I made it work with:

    @media screen and (max-width: 650px){
.page-id-# .quantity input.minus{display: none !important;}
.page-id-# .quantity input.plus{display: none !important;}
    • This reply was modified 4 years ago by dyin.
    Plugin Author Niels Lange

    (@nielslange)

    4 years ago

    Hello @dyin 👋 The following CSS code will remove +/- buttons when the screen is smaller than 650px:

    /* Remove +/- buttons on mobile devices */
@media screen and (max-width:649px) {
  div.product:not(.compare-button) div.summary form.cart .quantity input.minus,
  div.product:not(.compare-button) div.summary form.cart .quantity input.plus {
    display: none;
  }
}

    In https://wordpress.org/support/topic/button-styling-on-cart-page-mobile/#post-12618235 you mentioned media width < 650px but in https://wordpress.org/support/topic/button-styling-on-cart-page-mobile/#post-12623056 you mentioned max-width: 650px.

    These are two different cases and here are the corresponding media queries:

    1. @media screen and (max-width: 650px){ .. } → Screen is 650px wide or smaller
    2. @media screen and (max-width: 649px){ .. } → Screen is smaller than 650px

    PS: Feel free to leave a rating if it fixes your issue. 😁

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘button styling on cart page mobile’ is closed to new replies.