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 Website Testing

How can I adjust my nav font to properly fit on a smaller screen if I used more characters in each nav title?

I've added more characters to my nav bar titles and when I shrink down to mobile size the nav bar becomes over crowded because there is to many characters. How can I adjust this to display so that it fits within the window?

First you can add a width to your nav. Then by going into your media queries I would adjust the width to fit proportionately with the screen resolution. I would suggest when going to smaller screen resolutions using a drop down menu. This would save space and look more professional.

Thanks James... what would you suggest the width be in the CSS file to adjust it accordingly? Would I add a new rule in CSS under my nav? I currently have this:

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

I just completed the first web page on Treehouse and don't know how to add a drop down menu to the mobile view of the site. Nick didn't teach that in the lesson.

Well, I suggest you continue with the track that your on. Eventually, the lessons will teach you about media queries. Media queries allow your website to function for different screen sizes. You have to add your new styles to your media queries. If you do the navigational menu with html and css only, you will have to creat an exact duplicate of the first menu with you would hide in full width view and style it to show for mobile and tablet. I know this may be confusing but trust me don't get overwhelmed and allow yourself to learn as much as possible. Web design and development is something that you will forever keep learning to master.

Muhammad Rizwan
Muhammad Rizwan
8,595 Points

I would suggest using min-width, under @media screen and (max-width:the width you want, do not put ; at the end){ min-width:the width that fit your nav elements. }

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

I think you will need to add a class selector to each set of different text, e.g <p class="sub-heading 2"> (Your text here)</p>, in your html page. Then in the css stylesheet, within each media-query declaration, you would display the class selector (.sub-heading 2) as a block. Then you would set the width as a percentage value. This width would then change depending on the size of its container. Its container would change is size because of its media-query rule.

Hoping this is of help, Jane

1 Answer

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points

Hi Jon,

Don't know if you've solved the problem yet. I see no one has mentioned using percentages as values for your css, rather than pixels . You can use a combination of media queries and percentages as values.