Page 1 of 1

alert box for mobile

Posted: 15 Aug 2017, 09:22
by laxina
Hi Karl,

is it possible that I can add an "Alert box" only for mobile visitors (small screen visitors).

Code
<div data-alert class="alert-box success">

<!-- close button below is optional -->
<a href="#" class="close close-x"></a>

Add your content/html here.
</div>
thanks

Leon

Re: alert box for mobile

Posted: 15 Aug 2017, 23:00
by mjau-mjau
Yes this is possible. Challenge is, how do you define a "mobile visitor"? Many mobile devices are full-sized screens. You would probably want to use either the hide-for-large-up or show-for-touch class. They are similar, but the first only shows the element on small to medium screens (often mobile devices), while the 2nd only shows the element for touch devices (always mobile, but could be large screens also).

Simply add the class to your element:
Code
<div data-alert class="alert-box success hide-for-large-up">
You can find more info about the visibility classes used in X3 here:
http://foundation.zurb.com/sites/docs/v ... ility.html

Re: alert box for mobile

Posted: 16 Aug 2017, 08:20
by laxina
Hi Karl,

thanks a lot, very useful for me .

Best

Leon