# Disable zoom on front page or mobile site...

**URL:** <https://colorlibsupport.com/t/disable-zoom-on-front-page-or-mobile-site/18312>\
**Category:** Tyche\
**Created:** [September 30, 2017, 12:15pm UTC](https://colorlibsupport.com/t/disable-zoom-on-front-page-or-mobile-site/18312 "2017-09-30T12:15:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![kamra](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/k/91b2a8/32.png) [@kamra](https://colorlibsupport.com/u/kamra)\
**Post date:** [September 30, 2017, 12:15pm UTC](https://colorlibsupport.com/t/disable-zoom-on-front-page-or-mobile-site/18312/1 "2017-09-30T12:15:44Z")

</div>

Hi there

Is it possible to disable zoom only on mobile version of theme? If not, I want to disable zoom on front page but not shop page… Please help.

Thank you.

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [September 30, 2017, 2:38pm UTC](https://colorlibsupport.com/t/disable-zoom-on-front-page-or-mobile-site/18312/2 "2017-09-30T14:38:47Z")

</div>

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -\> Appearance -\> Customize -\> Additional CSS

```auto
/*disable pointer events on mobile*/
@media (max-width: 550px){
  .tyche-product.primary {
    pointer-events: none;
}
}

```

Best regards,  
Support.

---

<div class="post-metadata">

**Author:** ![kamra](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/k/91b2a8/32.png) [@kamra](https://colorlibsupport.com/u/kamra)\
**Post date:** [September 30, 2017, 6:51pm UTC](https://colorlibsupport.com/t/disable-zoom-on-front-page-or-mobile-site/18312/3 "2017-09-30T18:51:01Z")

</div>

Thank you for your interest,

It works on product pages but not work on the 'content widget areas" on the front page. Is there a way to disable zoom on mobile version completely?

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [October 10, 2017, 1:29pm UTC](https://colorlibsupport.com/t/disable-zoom-on-front-page-or-mobile-site/18312/4 "2017-10-10T13:29:48Z")

</div>

Hello there,

Please try using this CSS code to catch the mobile zoom instances:

```auto
/*disable pointer events on mobile*/
@media (min-width: 400px){
  .tyche-product.primary {
    pointer-events: none;
}
}

```

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![izzisolo](https://colorlibsupport.com/user_avatar/colorlibsupport.com/izzisolo/32/482_2.png) [@izzisolo](https://colorlibsupport.com/u/izzisolo)\
**Post date:** [October 18, 2017, 2:03pm UTC](https://colorlibsupport.com/t/disable-zoom-on-front-page-or-mobile-site/18312/5 "2017-10-18T14:03:39Z")

</div>

Doing this disables all click events, and when clicking on the item name nothing happens (Which means it is impossible for the user to buy it)

---

<div class="post-metadata">

**Author:** ![izzisolo](https://colorlibsupport.com/user_avatar/colorlibsupport.com/izzisolo/32/482_2.png) [@izzisolo](https://colorlibsupport.com/u/izzisolo)\
**Post date:** [October 18, 2017, 2:23pm UTC](https://colorlibsupport.com/t/disable-zoom-on-front-page-or-mobile-site/18312/6 "2017-10-18T14:23:07Z")

</div>

Instead, do this:

```auto
@media (max-width: 550px){
  .tyche-product .tyche-product-image{
    pointer-events: none;
}
}

```

this will disable click events for the image only, and not the text under it.

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [October 19, 2017, 11:50am UTC](https://colorlibsupport.com/t/disable-zoom-on-front-page-or-mobile-site/18312/7 "2017-10-19T11:50:13Z")

</div>

Hello @izzisolo,

Thanks for adding this update to make the code work more smoothly.  
@kamra Please let us know of any other issues.

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![noolusi](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/n/ed8c4c/32.png) [@noolusi](https://colorlibsupport.com/u/noolusi)\
**Post date:** [November 2, 2017, 7:26am UTC](https://colorlibsupport.com/t/disable-zoom-on-front-page-or-mobile-site/18312/8 "2017-11-02T07:26:27Z")

</div>

Hey @izzisolo  
Thanks for the solution. Worked like a chime, was searching all over for this solution.

Thanks a lot.

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [November 3, 2017, 12:57pm UTC](https://colorlibsupport.com/t/disable-zoom-on-front-page-or-mobile-site/18312/9 "2017-11-03T12:57:37Z")

</div>

Hello there,

@izzisolo Nice work on posting the solution.  
Please feel free to contact us again in the future regarding any other issues.

Best Regards,  
Support