Question

I have been working on making my website mobile compatible. Whilst I have successfully managed to link the mobile CSS and my web CSS, my navigation elements will not display!!

I would be grateful if anyone had any ideas as to why it wont display.

My site is http://www.therisingsuntarporley.co.uk, I have put my mobile CSS below.

Thanks

html, body 
        {
            font-size: 30px sans-serif;
            background: #000;
            padding: 3px;
            color: #000;
            margin: 0;
        }

#body 
        {
            margin-right: 0;
            margin-left: 0;

        }

#middle {

    width: 90%;
    min-height: 500px;
    margin-top: 65px;
    border:3px solid #333;
    background-color:#FFFFF0;
    overflow:auto;
    padding-bottom: 75px; /* must be same height as the footer */
    }


#middlecontent 
        {
            font: normal 1.4em sans-serif;
            padding: 0px;
        }

#cencontent 
        {
            font: normal 1.4em sans-serif;
            padding: 0px;
            text-align: center;
        }


#mobilenav 

{  
  margin-top: 25%;   
  padding: 0;
  background: #000;
  list-style-type: none;
  font-size:2.4em;
  font-family:Verdana;
  height: auto;
  width: auto;
 }

#mobilenav a 
{   
  display: block;  
  color: #FFF;
  text-decoration: none;
  padding: 0 15px;
  line-height: 2.5;
  border-bottom: 1px solid #FFF;
}

#mobilenav a:hover 
{ 
  background: #C1C1C1;
  color:white;
}

#mobilenav #con a {
  border: none;
}

#logo
        {
            width:100%;
            height: auto;
        }
#footer 
{
    border-top: 3px solid #7CFC00;
    bottom: 0;
    width: 100%;
    background-color: #2e2e2e;
    clear:both;     
/*text colour*/
    font: normal 0.7em "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #fff;    
    text-transform: uppercase;
    text-align: center;
    font-stretch:expanded;
    background: #000;
}

#aboutus, #goomap,  #myGallery, #mainimage, #navbar
        {
            display: none;
        }

Answer 1

Well, you’ve forgotten to add add the following code to #mobilenav:

display: block !important;

Should workd without the !important too, if you load the mobile CSS after your standard css