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 Francis Roslak
Francis Roslak
Courses Plus Student 5,026 Points

Responsive Troubles

I am having some issues in the Responsive Design lessons. My portfolio doesn't render well in the smallest size screen. My number 9 caption gets larger than the others and my navigation breaks to another line where Portfolio and About are above Contact.

https://w.trhou.se/wseznrww7o

Richard Nicholls
Richard Nicholls
1,301 Points

what browser are you rendering in?

Francis Roslak
Francis Roslak
Courses Plus Student 5,026 Points

I use Google Chrome.

1 Answer

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

Just a quick glance at your responsive.css file and it looks like your smallest media query kicks in at 480px. You can either implement a smaller media query like 320px or make your default text sizes smaller in your main.css file and then increase the size as your media queries increase. For example, let's say in main.css you have an h1 that is 18px, well then in responsive.css you could bump that up as the screen size gets larger, does that make sense?

Francis Roslak
Francis Roslak
Courses Plus Student 5,026 Points

Thanks for the help! I got the smallest media query from the lesson so I still don't understand why it worked for Nick but not for me. Anyway....much appreciated!