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!

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

HTML

Matt Bedford
Matt Bedford
2,646 Points
Posted by Matt Bedford
Matt Bedford
2,646 Points

The mobile version of my site is really small

So I've been following all the tutorials and have been doing the code. I loaded the link onto chrome on my iphone 6 and the text was really, really small and when I rotated the phone, it adjust for landscape mode, but when I rotated back to portait, it didn't adjust completely.

Am I jumping the gun and this get's touched on later?

here's a link: http://port-80-hz5i669txr.treehouse-app.com/

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Possibly add a media query to increase the size of the font when the screen width is that small. That'd be my first suggestion.

Moriah Sella
PLUS
Moriah Sella
Courses Plus Student 25,814 Points
Moriah Sella
Moriah Sella
Courses Plus Student 25,814 Points

you have many options. I see that you are working mobile first - so you start with min dev width. in this case make sure that you add your columns right. I recommend to use flex box for multiple items like this. or you need to work with grid - container - row - column. this will help you to stack elements and to distribute them on desktop. flex box supported in IE10+ and all the modern browsers

Matt Bedford
Matt Bedford
2,646 Points
Matt Bedford
Matt Bedford
2,646 Points

Thanks guys!

I added a responsive.css with a media query for screen with a min width of 650px.

Just wondering, as the tutorial I'm doing is a couple of years old and i'm testing this on an iphone 6, when I rotate the phone to horizontal. It's displaying the webpage as if it were on a computer (or a larger device).

I've got this little bit of code: @media screen and (min-width: 1400px) And am playing with that minumum width, but it doesn't seem to effect the page's display in landscape mode on my iPhone 6

here's a link: http://port-80-hz5i669txr.treehouse-app.com/index.html