Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #211178


    can i remove the zoom effect on mobile devices when clicking a product ?

    I am using the responsive option.



    Hey de2ma2!

    Please add following code to Quick CSS in Replete theme options under Styling tab

    @media only screen and (max-width: 767) {
    .csstransitions #top .products .product:hover>.inner_product, #top .products .product.js_hover:hover>.inner_product {
    width: 100%;
    left: 0; }}

    Please flush browser cache after applying the code


    This reply has been marked as private.


    It actually starts out at 96% size so it just needs a bit of a tweak. I also added a removal of the box shadow if you want that too:

    @media only screen and (max-width: 767px) {
    .csstransitions #top .products .product:hover> .inner_product, 
    #top .products .product.js_hover:hover>.inner_product {
      width: 96%;
      left: 0; 
      box-shadow: 0 0 0;

    Best regards,


    Thank you Devin for your reply,

    One more question: before removing the zoom effect, the picture needed to be pressed twice (on mobiles) before going to the product itself and that was obvious because the first click was for zooming effect and the other was for entering the product page. however when you sent me the CSS tweak it actually works but the customer should also press twice on the photo before entering the product’s page.

    Thank you


    For that I don’t know of a fix for it since the initial click or hover technically is showing the add to cart or more info buttons and the second click is the actual click of the user on the url presented.


    Thank you devin,

    You’re right because am planning to launch the online payment soon so i will be in need of two clicks.


Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Zoom Effect on mobiles’ is closed to new replies.