Prestashop 1.7 visible or not visible on mobile device

[Ornot]

Hi,

i would like visible only on mobile version  a link, i try very much possibility like this post https://www.prestashop.com/forums/topic/384777-solved-hide-left-column-on-mobile/

and this table :

 

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
.visible-xs-*	Visible	Hidden	Hidden	Hidden
.visible-sm-*	Hidden	Visible	Hidden	Hidden
.visible-md-*	Hidden	Hidden	Visible	Hidden
.visible-lg-*	Hidden	Hidden	Hidden	Visible
.hidden-xs	Hidden	Visible	Visible	Visible
.hidden-sm	Visible	Hidden	Visible	Visible
.hidden-md	Visible	Visible	Hidden	Visible
.hidden-lg	Visible	Visible	Visible	Hidden

 

this table come from https://getbootstrap.com/docs/3.3/css/#responsive-utilities

 

i enable the mobile device on the modules

i try many solutions

i would like enable top banner on mobile (the banner appears on desktops and tablets)  and in the same way i would like to display only on mobile a link like <a href="#" class="btn btn-default hidden-sm hidden-md">Click</a>

 

thanks in advance for your help online,

Ornot

[Kami Solutions]

Hello,

 

the classes above won't work on prestashop, these will do the trick:

.hidden-[size]-[behaviour]

Where [size] can be "sm" , "md" , "lg" , "xl"

As you can see is very intuitive and you hide it depending on your needs, being "sm" (small) for mobile, "md" (medium) for tablet, "lg" (large) on desktop and "xl" (extra large) for larger displays.

Where [behaviour] can be "up" or "down", if you want to be shown should be "up" and hidden with "down".

This way you can show things only for mobile, for example :

.hidden-sm-up

 

I know it's an old post but for everyone who is looking for this info should be helpful