How Can I Make My Website Width Fit Fully On Iphone 5?

I am working on a new site for my photography hobby. the ad is faspix.com I have got it to fit onto laptop/desktops how I would like but I am having an issue with making the width

Solution 1:

Add this code inside the header!

<metahttp-equiv="Content-type"name="viewport"content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

Solution 2:

Judging from what you have copied onto here, your media queries seem to be incorrect, here are some example queires, as answered on this question...

/* Smartphones (portrait and landscape) ----------- */@mediaonly screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */@mediaonly screen 
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */@mediaonly screen 
and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */@mediaonly screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */@mediaonly screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

Obviously add the styles as per requirements, and change media query sizes as needed!

For future reference, CSS Tricks has a good article for you to read up on Media Queries. Another thing you need to consider will be browser compatibility, as IE8 and before doesn't support this, as stated here

Solution 3:

Since there is no Code, just a shot in the dark. Add

<metaname="viewport"content="width=device-width; initial-scale=1.0" />

to the head of your HTML.