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

Posted by Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

Resizing Content

In my code when I resize the browser to around 740 pixels, the navigation becomes very close to the .Name class.

I am not sure why this is happening, because in my media query I set the element to go on different lines around 769 pixels.

when the navigation and .Name class do become close together, how can I create more space in-between the margins or have it the elements automatically go to the next line when they get to close?

Here is my code: https://w.trhou.se/s0mu9z6pmy

2 Answers

rmgvqegryz
rmgvqegryz
3,970 Points
rmgvqegryz
rmgvqegryz
3,970 Points

I think I found why your header has that strange behavior. I start with a large screen. When I make the browser smaller, your website reorganizes in 3 stages. Thats because you didn't manage your margins enough and your code gets overwritten by the browser standard styles. And also, you should put your ul (main-nav) inside a nav element and give the nav element this class name (.main-nav).

I suggest the next... (larger than 769px) Make sure .Name class and .main-nav full up the screen for 100%. Change the left and right margins and resize the width of these 2 elements. (600 - 769px) Make sure .Name class and .main-nav full up the screen for 200%, each 100%.

You can adjust this by modifying the margins and width. I will send some code soon how I managed your page to your preferences.

Lindsay Barrett
seal-mask
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points
Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

Thank you Jochenguard!

rmgvqegryz
rmgvqegryz
3,970 Points

You're welcome.