|_^_^_| tip off

Tip off

At the very bottom of the #HTML before body ends, there is the modal lightbox. This box is an <a> element that has nothing inside and it is not shown unless it matches your conditions.

Along projects and responsive, mobile first, content first, human first thoughts come into play I fight with some scenarios where the navigation on small devices is better for the users when they handle theirs devices in portrait mode. Here is were tip-off is very handy because it lets you to show a little message to the user and close it easily, with no Javascript, just with few lines of CSS.

Demo

To see it in action just resize the browser to fit the height of the browser between 160px - 400px

Advanced tip

The power of this modal box is based in the pseudo element :target. However eventually the href attribute could broke your URL when the modal box is clicked. In those situations you must find a solution like this href="< ?php echo $_SERVER['REQUEST_URI'].'#close'; ?>"

Final thoughts

Please, take this demo as it is, a little demo where I pretend to show to you the power of this snippet, but consider your own target before copy/paste.

WHATEVER HEADER

Stop Global Warming

Tomtom

Smint

Spontex

República Dominicana

Mamutlove