<!-- iOS reminder bubble markup -->
<div class="bubble" id="bubble">
  <a class="bubble-close" id="bubble-close">x</a>
  <p>don't forget to add this app to your <strong>home screen</strong> for easier access</p>

<!-- wanna the see the bubble again after you closed it? inspect/resources/localStorage/, delete the 'bubble' key and refresh -->

↑ Insert the most common viewport meta tag


              /* remimder bubble styling */
  background-color: #FFF;
  border: 6px solid #666;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  bottom: 0px;
  color: #666;
  display: none;
  left: 50%;
  margin-bottom: 25px;
  margin-left: -125px;
  padding: 0px;
  position: fixed;
  text-align: center;
  width: 240px;
  z-index: 100;
.bubble p {
  font: normal 18px Arial, Sans-serif;
  margin: 8px;
.bubble strong{
  font-style: italic;
  font-weight: bold;
.bubble:after {
  bottom: -15px;
  border: solid 20px transparent;
  border-bottom: 0;
  border-top-color: #fff;
  content: "\0020";
  display: block;
  height: 0;
  left: 42%;
  overflow: hidden;
  position: absolute;
  width: 0;
  z-index: 101;  
.bubble:before {
  bottom: -24px;
  border-top-color: #666;
  z-index: 99;
  background-color: #666;
  border-radius: 80px;
  color: #fff;
  cursor: pointer;
  font: bold 20px Arial, Sans-serif;
  margin-right: -20px;
  margin-top: -20px;
  padding: 2px 9px;  
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint


              $(function() {

function showMeTheBubble(){
  //does the 'bubble' key exist in localStorage? if not show the bubble markup.
      //store the 'bubble' key and set value to true.
      localStorage.setItem("bubble", true);
  else{console.log("meh, do nothing");}
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................