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 fit onto my iPhone when I load the page on iPhone the height is there fully but the width only shows about half from left to right then I have to scroll right to see the rest of the width... I have tried a bunch of different media queries but nothing has really solved the issue for example when I switched the site_content to max width 100 it just shrunk the container on the iPhone. Can someone help me get this width issue fixed on the iPhone? Thanks
CSS:
media (max-device-width: 1024px) { /*IPad portrait AND netbooks, AND anything with smaller screen*/ /*make the design flexible if possible */ /*Structure your code thinking about all devices that go below*/ }
@media (max-device-width: 640px) { /*Iphone portrait and smaller*/ }
media (max-device-width: 540px) { /*Smaller and smaller...*/ }
media (max-device-width: 320px) { /*IPhone portrait and smaller. You can probably stop on 320px*/ }
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) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only 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