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

CSS How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Jay Reyes
seal-mask
.a{fill-rule:evenodd;}techdegree
Jay Reyes
Python Web Development Techdegree Student 15,937 Points

iphone 5s not conforming with breakpoint

My about and contact pages both display how they should but my portfolio page does not on the iphone! here's my site: jayreyes.us

and my workspace: https://w.trhou.se/7cfxb5vtx1

1 Answer

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points

Mobile browsers by default try and mimic how a page would look on a desktop browser, so they try and display the whole page by zooming out. To fix this, you need to tell the browser to use its viewport as the screen size. You can do this by adding this tag inside your <head> section:

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

If you want to prevent zooming by pinching and squeezing the screen, add ", maximum-scale=1" after initial-scale=1.