2

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*/ }
Amir
  • 1,328
  • 2
  • 13
  • 27
Sasha Essentialz Jevremovic
  • 59
  • 2
  • 11
  • If you could provide some code on what you tried, for example, what media queries you used, that would be a great help! – Matt Maclennan Nov 05 '13 at 16:58
  • hi matt, i have tried these so far – Sasha Essentialz Jevremovic Nov 05 '13 at 17:02
  • 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*/ } tried a cpl of others as well but thats what i currently have in mobile.css file my site content is 1260px wide & i would like to make it fit:( – Sasha Essentialz Jevremovic Nov 05 '13 at 17:04

3 Answers3

5

Add this code inside the header! 

<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
Jess
  • 23,901
  • 21
  • 124
  • 145
Prashant Ghimire
  • 4,890
  • 3
  • 35
  • 46
1

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

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

to the head of your HTML.

ZimTis
  • 179
  • 9
  • this is what i currently have ill try that though in a sec:) – Sasha Essentialz Jevremovic Nov 05 '13 at 17:05
  • It would be helpful if you show us your HTML file, or at least the head of it ^^ – ZimTis Nov 05 '13 at 17:11
  • `device-height` is not something that is usually found in media queries....definitely remove that. – Paulie_D Nov 05 '13 at 17:12
  • hey guys thanks for the help so far as i said below to matt i added the 3 styles he suggested for iphone into my mobile.css – Sasha Essentialz Jevremovic Nov 05 '13 at 17:50
  • then now in my html file i have this but im wondering do i need to change anything my style.css file as the site container is 1260px wide and im only seeing half on the iphone unless i scroll over – Sasha Essentialz Jevremovic Nov 05 '13 at 17:51
  • I just can write it again, pleas post your HTML file, so that we can see everything. You can try : – ZimTis Nov 05 '13 at 18:21
  • – Sasha Essentialz Jevremovic Nov 05 '13 at 20:22
  • it wont let me post fully here, i thought you might be able to see on the site view page source? i have tried all these sugestions all on the page here with no luck so far unfortunalty i just can seem to get the full width:( in my mobile css now i just have media handheld and (min-width: 320px) and (max-width: 568px) and (maximum-scale:2); { } media handheld and (-webkit-min-device-pixel-ratio: 2); im not sure why this code is not working as my other site essentialzmusic.com it works fine with that but on that site the container is 960 wide and here my main and site content is 1260 px wid – Sasha Essentialz Jevremovic Nov 05 '13 at 20:25
  • I assume you want to achieve a responsive design, right? For one, I think "handheld" is ignored by iPhones so they will never interpret your mobile.css, if you use a stylsheet with the media querys Matt mentioned, you should be fine for every device. Or look at response frameworks, like Twitter Bootstrap, what they use as media querys. – ZimTis Nov 06 '13 at 09:15
1

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

Community
  • 1
  • 1
Matt Maclennan
  • 1,266
  • 13
  • 40
  • hey matt so i deleted the old media queries and put the top three as you listed above for smart phones then in my html file i put this line now do i need to add anything to my style.css as my container is 1260px wide but its still not fitting. Thanks for the help so far. – Sasha Essentialz Jevremovic Nov 05 '13 at 17:49
  • Hi there, you should put the code I have given your main CSS file. No need for media queries in the HTML file. – Matt Maclennan Nov 06 '13 at 08:37