Responsive template not working

I have used a responsive template on a site I’m building and it does not work on my iPhone.
Can someone please have a look and suggest why this may be?

Any help appreciated.

Those boxes underneath the slideshow are positioned absolutely and are not responsive at all. The third one is placed way off to the right, for example. So you’ll either need to reposition them on smaller screens or rethink your approach to this. I don’t see the need for abs pos there are all. Perhaps just float them?

Get this working on desktop first. If you narrow the browser window, you see the problem there too.

Thanks Ralph, That makes sense. Would this also be the cause of the slogan not resizing and the menu disappearing?

Not sure what the slogan is, but the logo is having problems because of tis width setting, which needs to be changed on smaller screens:

.row-fluid .span7 {
[COLOR="#FF0000"]width: 65%;[/COLOR]
background: url("") no-repeat 0 0;
height: 60px;
margin-top: 15px;

The menu isn’t working because of the left setting here:

.navbar .nav {
position: relative;
[COLOR="#FF0000"]left: -250px;[/COLOR]
display: block;
float: left;
margin: 7px 10px 0 0;
width: 780px;

Unfortunately, in responsive design you can’t leave a single stone unturned. You need to scrutinize every style and consider how it will affect things at each viewport size. To prevent styles operating in all conditions, start to group them within media queries.

Many thanks Ralph! will knuckle down again :slight_smile: