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
Victor Mercier
14,667 PointsWhy is my breakpoint not working
Is someone able to tell me why my media query is not working ?
Here is the link: https://w.trhou.se/il0q3x11oy
To see the css code, open chrome dev tools and inspect the styles
On mobile devices, it should be a single column layout and on larger screens a multicolumn layout
I do not know why but at a certain width, my navigation center (I do not want this) . I want either a block nav or what we see in full screen.
Victor Mercier
14,667 PointsSorry Steven for my incompetence!
Victor Mercier
14,667 PointsIt said in chrome dev tools the width of iphone 6 is 375px. Why it does not work.
Victor Mercier
14,667 PointsI don't know if it is becuase it is about general discussion topic but I cannot mark your answer as best answer
Steven Parker
229,732 PointsYou're right, questions in "General" don't have "best answer" options. But you can move the topic area to CSS (where it probably belongs anyway). Click the little rectangle with the 3 dots to select the "Edit Question" option.
1 Answer
Steven Parker
229,732 PointsThe breakpoint is working fine, and the nav elements are always centered, but it's not obvious when the window is wide enough for them all to fit on one line.
At sizes larger than the breakpoint, but still too small for them to fit on one line, the menu wraps below the title and they are both more obviously centered (by the "text-align: center" setting on the container).
There's a variety of possible remedies, including using a smaller font, less padding or margins, or using a different layout strategy for the nav area (perhaps a flexbox, or floating the title and menus).
Victor Mercier
14,667 PointsThank you you are able to solve every problem!
Victor Mercier
14,667 PointsMy media query is working but on my smartphone (iPhone6) it not being applied
Steven Parker
229,732 PointsPerhaps the device has a higher pixel count that you are expecting and is actually over the breakpoint. Also, modern browser dev tools (like Chrome) often have a simulator mode to help diagnose issues with mobile devices.
Steven Parker
229,732 PointsI confirmed the media query operation using a responsive design simulator. I don't know much about iPhones, is it possible that it does screen scaling and appears to be a different size to the server?
Steven Parker
229,732 PointsSteven Parker
229,732 PointsThat live workspace links has already expired, but you can create a persistent one if you make a snapshot of your workspace and post the link to it here.