cssmobile

Mobile and tablet web site

I'm in the process of creating my web site. The URL is: http://bvanlieshout.com

It's far from done but I want to finish the home page first before I even start looking at the other pages.

So what I've tried is making everything with %. Using:

@media only screen and (max-width: 768px) {
  .frontImage{
    display:none;
  }
}

@media only screen and (max-width: 320px) {
  .frontImage{
    display:none;
  }
}

@media only screen and (min-width: 769px) {
    .navigation ul li {
        display: inline;
        width: 100px;
        padding-left: 10px;
    }
  .nowWhat{
    width:800px;
  }
}

That works, sort of; when I check my mobile phone and open the page it doesn't hide the images. I'm guessing because the page width is still beyond 320/768 px. So basically what I'm asking is some pointers, tips. Any help would be appreciated!

Solution

  • Place this <meta name="viewport" content="width=device-width, user-scalable=no"> inside of your <head></head>