Jump to content


Photo

I need to hide my custom contents on mobile devices (vela theme prestashop)


  • Please log in to reply
1 reply to this topic

#1 OVOnel

OVOnel

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 13 January 2018 - 02:35 AM

Hello, I bougth HTML Pro and I have a question. 
I need to have 2 HTML Box Pro modules in the same site, one to show only in desktop and another in same position to show only in mobile devices. 
Is posible this with your module? Can the module be duplicated? 
I do not mind paying for another copy of your module if necessary. 
Thanks. 
Regards. 



looking for the best presta addons with outstanding support? check this: PrestaShop Modules

#2 vekia

vekia

    Advanced Member

  • Members
  • PipPipPip
  • 10166 posts

Posted 13 January 2018 - 02:39 AM

Hello
Fortunately your theme is based on "botstrap" so it is fully responsive and allows to use responsive codes.

Whole idea is based on special css classes that hides code on selected device types.

css class result .hidden-xs element with this class will be hidden on small devices (mobile phones)
Extra small devices Phones (<768px) .hidden-sm element with this class wil be hidden on small devices (mobile phones with large screen, tablets)
Small devices Phones (large), Tablets (≥768px)  .hidden-md element with this class will be hidden on desktop with small screen size
Medium devices Desktops (≥992px) .hidden-lg element with this class will be hidden on desktop with large screen size
Large devices Desktops (≥1200px)

 

For example, if we want to hide element on phone we must use class="hidden-xs", if we want to hide element on tablets too we must use: class="hidden-sm"

 

examples:

 

hide on mobile:

<div class="hidden-xs">
this element will be hidden on mobile phone
</div>

hide on mobile and tablet:

<div class="hidden-xs hidden-sm">
this element will be hidden on mobile phone and on tablet device
</div>

hide on large desktop devices;

<div class="hidden-lg">
this element will be hidden on desktop
</div>

video of how to implement it:

https://drive.google...yAsjunasBeMAvdx


free tutorials, free templates, free addons, prestashop modules MndfRK4.png  lpHMrZ5.png  gtKHYO7.png  google-48.png