Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
George S-T
6,624 PointsCan't get my site iPhone/iPad compatible?
Here is my website, have a go at resizing it in the window!
http://www.fs.x10.mx/index.html
I clearly used loads of media queries in order to make my site work on different devices, however I just tried opening the site on my iPhone and it comes up like it does on a desktop. How do I change this so my site is phone compatible? Thanks!
5 Answers
Andrey Soloviev
1,501 PointsYes, changing the content with:
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
This should do the trick. Just make sure your design is 100% foolproof at this stage, because if some sections happen to break, users won't be able to resize to see the rest of the content. :) Exercising caution is always good.
Andrey Soloviev
1,501 PointsGreat work! Still, you forgot the one little detail that makes it all work on mobile:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Throw that in your head, before the <title> preferably, and you should be good to go. :)
George S-T
6,624 PointsThanks so much!
Is there a way to make it so that the iphone users cannot resize the website by pinching? So that the view is fixed on the screen>
George S-T
6,624 PointsThanks !!
One last problem: [IMG]http://i57.tinypic.com/fwlh7r.jpg[/IMG]
![http://i57.tinypic.com/fwlh7r.jpg[/IMG]](http://i57.tinypic.com/fwlh7r.jpg%5B/IMG%5D){kind=link}
As you can see, for some reason the footer is no longer 100% wide and the container isn't centered. I don't know why it's decided to do this.
Another problem is the paragraphs in the container now go over the actual container. I have this in my CSS, but it seems to have no effect:
@media screen and (max-width:461px) {
.footer p {
font-size: 10px;
}
.container p {
font-size:15px;
max-width:50px;
}
}
Andrey Soloviev
1,501 PointsGeorge,
To be honest, I don't think that max-width is doing anything. After taking a look at your code, your paragraphs seem to have lots of "padding-left" even on smaller screens, and I think that's what's making them go over the container. Reduce the padding-left on smaller screens and it should be fine.
As for the footer, it works fine and takes the width required, but since the paragraph is pushed out, it stretches the entire container. It should be good once you fix the paragraphs.
George S-T
6,624 PointsI have removed that padding and now there is about a letter's space of overlapping the container. How should I fix that?
Another thing, is the Eurostile font that the page is set to actually working for you? or is it loading with a different font?
George S-T
6,624 PointsDont worry! Fixed both these myself!
George S-T
6,624 PointsDont worry! Fixed both these myself!