ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• October 14, 2014 at 4:57 pm #120159
  danx88

  Member

  Post count: 31

  Hello,
  I’ve made some changes to how Add to cart button looks on mobile devices using CSS only (position fixed for max-width=760)
  it works but the Add to Cart button has some strange bahaviour on MouseDown event, it just moves up for about 30px and then comes back when the mouse key is released.

  I need to fix this so I can position the bar at the bottom of the page (position fixed at bottom:0px)
  Now I had to keep them on top which looks ugly. when I move the bar to the bottom, the add to cart button goes to the top of the page on Mouse Down, making it impossible for user to click it and add product to cart.

  I hope I could explain the issue, please check on any single product page on madotta.com/shop

  By the way, I think this is a nice feature for you to include on your next versions (maybe on Cardinal or Joyn) because with the cart and main menu sliding from sides of the page, and the price and add to cart button always showing on bottom, it will be a really great theme for mobile friendly shopping.

  Cheers,
  Sia

  October 15, 2014 at 10:59 am #120388
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  I’m afraid we can’t support bespoke customisations, as this is down to changes you have made, you will have to figure it out yourself

  – Kyle

  October 15, 2014 at 11:07 am #120395
  danx88

  Member

  Post count: 31

  I understand but it’s really a bespoke customisation, I just added this CSS to Add to cart and price tags:

  Position: fixed;
  Top:50px;
  Left:0;
  (and right:0;)for add to cart.

  but that behaviour should be from some MouseDown event function that’s already been there in the theme code, I don’t need a complete solution from you, if you can just show me where that JS code is located or any hint really, I’ll fix it myself.

  Cheers,
  Sia

  October 15, 2014 at 11:19 am #120398
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add hthis to your custom css:

  .woocommerce div.product form.cart .button:active, .woocommerce #content div.product form.cart .button:active, .woocommerce-page div.product form.cart .button:active, .woocommerce-page #content div.product form.cart .button:active {
    top: 50px!important;
  }

  Obviously within your media query

  – Kyle

  October 15, 2014 at 12:33 pm #120431
  danx88

  Member

  Post count: 31

  Thanks, tried it but still not working, I’ll have to look more deeply in the code to find where should I tweak.

  Cheers,
  Sia

  October 15, 2014 at 12:34 pm #120432
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  No problem

• Back to forum

  Posted in: Dante