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

Posted by Kristopher Gaisford
Kristopher Gaisford
Courses Plus Student 501 Points

[Solved] Small Browser window looks different than Mobile phone

While Viewing my code in a small browser window to simulate a browser window I get what I would like it to look like on mobile:

https://i.imgur.com/eZhCqRt.png

And Even viewing in a Mobile viewer (Built into my code editor) it is displayed as:

http://i.imgur.com/hP7oJwz.png

But while viewing it on my actual mobile phone it looks like:

https://i.imgur.com/JV4D45e.png

Why is this? How can I resolve it?

Crescens Kob
Crescens Kob
19,946 Points
Crescens Kob
Crescens Kob
19,946 Points

hey, i think you should go on the media queries and try to figure out what dimension can work on every mobile viewer..because every phone has its own size ....

A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points
A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

Without seeing your code, it's hard to tell, but I'm guessing you might not have a viewport meta declaration in your <head> section. This declaration enables your device to scale the content appropriately.

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

I'm presuming your code is developed to be mobile-first, but you may be using pixel units for measurement instead of relative units like ems, rems, viewport height/viewport width or percentages. Without declaring the viewport scale, the device may render these literally.

On a Retina-screen device, this may make everything 2-3x smaller than intended; that's why your code seems to appear showing its tablet breakpoint rather than its mobile breakpoint.

More info here: https://css-tricks.com/snippets/html/responsive-meta-tag/

Kristopher Gaisford
Kristopher Gaisford
Courses Plus Student 501 Points

@A.J. Kandy - You Rock! Would have never guessed that. Heck didn't even know about that. You've saved me from confusion and frustration. Thanks a ton!