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

CSS

Why 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.

Steven Parker
Steven Parker
225,742 Points

That 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.

Sorry Steven for my incompetence!

It said in chrome dev tools the width of iphone 6 is 375px. Why it does not work.

I don't know if it is becuase it is about general discussion topic but I cannot mark your answer as best answer

Steven Parker
Steven Parker
225,742 Points

You'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
Steven Parker
225,742 Points

The 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).

Thank you you are able to solve every problem!

My media query is working but on my smartphone (iPhone6) it not being applied

Steven Parker
Steven Parker
225,742 Points

Perhaps 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
Steven Parker
225,742 Points

I 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?