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

HTML How to Make a Website Responsive Web Design and Testing Responsive Web Design

Sean Tremaine
Sean Tremaine
4,303 Points
Posted by Sean Tremaine
Sean Tremaine
4,303 Points

My Website Does Not Look Responsive on Mobile...

We started the class designing for mobile first, so the site is supposed to look good on mobile. Right now when I open my site in Chrome/Safari on my iPhone all the text/icons are very tiny and unreadable. Anyone know why or what part of my code I should check to see if I made a mistake? I am creating it in Treehouse's workspaces. When I resize my browser on my desktop it works perfectly and looks good. But, I emailed myself the preview link- http://web.6emhsxb3hi.treehouse-app.com/index.html -and opened it on my iPhone and it does not look responsive. Here is the code- http://cdpn.io/urygw

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Add your code if you want specific help.

3 Answers

Alejandro Ñáñez Ortiz
Alejandro Ñáñez Ortiz
21,184 Points

Hey Sean,

I think you should add the viewport metatag for example

<meta name="viewport" content="width=device-width, initial-scale=1">

Sean Tremaine
Sean Tremaine
4,303 Points
Sean Tremaine
Sean Tremaine
4,303 Points

Alejandro,

Thank you very much. That worked perfectly.

Chris Mitchell
Chris Mitchell
12,719 Points
Chris Mitchell
Chris Mitchell
12,719 Points

you havent used text-size-adjust anywhere have you??

On desktop, shrink your browser to mobile size and see if it happens, if so then right click for inspect element and try changing a few things to see whats causing it.

Sean Tremaine
Sean Tremaine
4,303 Points
Sean Tremaine
Sean Tremaine
4,303 Points

Chris,

Thanks for the reply. No I don't think I used that anywhere. I updated my question above to be more detailed and added a link to the code. It looks good when I shrink the browser to mobile size on my desktop, but if I open it up straight onto my iPhone it does not look responsive.