title: Content not showing on mobile device
body: <p>I am working on a website it all works apart from the page below when used on a mobile device.
  The accordion is supposed to work to show the menu items when that that menu section is active, but on mobile devices the content does not show up when the accordion is active?</p>
  
  <p><a href="http://valleyinn.ie/menus/menus.html" rel="nofollow">http://valleyinn.ie/menus/menus.html</a> </p>
  
  <p>The html</p>
  
  <pre><code>&lt;H1&gt; A La Carte Menu &lt;/H1&gt;
      &lt;div class="wrapper"&gt; 
      &lt;ul class="accordion"&gt;
          &lt;li class="nav-dropdown"&gt;
              &lt;input type="radio" name="accordion" id="menu 1" /&gt;
              &lt;label for="menu 1"&gt;
                  Starters
              &lt;/label&gt;
              &lt;div&gt;
                  &lt;h2&gt;Starters&lt;/h2&gt;
                  &lt;p&gt;Prawn cocktail : Clogherhead prawns coated in Marie Rose sauce served with salad&lt;/p&gt;
                  &lt;p&gt;Garlic Bread: Garlic bread coated with mozarella cheese&lt;/p&gt;
                  &lt;p&gt;Bruchetta: Garlic toastie with tomato, basil and melted mozzarella&lt;/p&gt;
                  &lt;p&gt;Deep Fried Brie: Breaded parcels of Brie deep fried and served with redcurrant jelly&lt;/p&gt;
                  &lt;p&gt; Garlic Mushrooms: Deep fried breaded mushrooms with garlic mayonnaise&lt;/p&gt;
                  &lt;P&gt;Fan of Melon: Fan of honeydew melon served with Raspberry Coulis&lt;/P&gt;
                  &lt;p&gt;Caesar Salad: Crispy cos tossed with bacon, croutons &amp; creamy caesar dressing with parmesan shavings&lt;/&gt;
                  &lt;p&gt;Soup of the Day
                  &lt;p&gt;Chicken Wings: Marinated chicken wings served with sweet chilli dip &amp; side salad&lt;/p&gt;
                  &lt;p&gt;Egg Mayonnaise&lt;/p&gt;
                  &lt;P&gt;Tiger Prawns: Served with honey mustard dressing &amp; garlic bread&lt;/P&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>div#title {
      text-align:center;
  }
  body div.wrapper {
      clear:both;
      border: 1px solid #dedede;
      margin: 25px auto;
      overflow: hidden;
      width: 80%;
   }   
  ul.accordion {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  ul.accordion li input {
      display: none;
      padding: 0;
      margin: 0;
      visibility: hidden;
  }
  ul.accordion label {
      background-color: #000000;
      border-bottom: 1px solid #dedede;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
      color:  #F9C921;
      display: block;
      font-weight: bold;
      line-height: 42px;
      padding: 0 8px;
  }
  ul.accordion label:hover {
      background-color: #F9C921;
      color:#000000;
      cursor: pointer;    
  }
  ul.accordion li input ~ div {
      background-color: rgba( 0, 0, 0, .05 );
      max-height: 0;
      opacity: 0;
  overflow: hidden;
      visibility: hidden;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
  }
  ul.accordion li input ~ div p {
      font-size: .9em;
      margin: 16px 24px;  
  }
  h1 {
      clear:both;
  }
  ul.accordion li input:checked ~ div {
      max-height: 100%;
      opacity: 1;
      visibility: visible;
  }
  ul.accordion li input:checked ~ div &gt; ul {
      display: block; 
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
  }
  </code></pre>
  
  <p>any possible fixes or workarounds I cant think of where to start apart from making a mobile device specific page which I haven't done before</p>
  
  <p>solved by changing code to avoid problem.</p>