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 Kristin Wastney
Kristin Wastney
254 Points

Responsive design not working

As I increase the size of my screen automatically my navigation does not move to be right aligned. I have to refresh the page in order to make it work.

Justin Horner
Justin Horner
Treehouse Guest Teacher
Justin Horner
Justin Horner
Treehouse Guest Teacher

Hello Kristin,

In order to help us find the problem please consider posting your code. If you're working on a particular course, please let us know which one.

Thanks!

Kristin Wastney
Kristin Wastney
254 Points

Thanks Justin! What is the best way for me to post my code? (I'm a rookie!). I've been working on the 'how to build a website' track. I've been building my own site though based on the one you get taught in the track.

Justin Horner
Justin Horner
Treehouse Guest Teacher
Justin Horner
Justin Horner
Treehouse Guest Teacher

You could use a service like CodePen and post a link here or simply post the code right in your original post. Use this post as a guide. If you need any help just let me know.

Kristin Wastney
Kristin Wastney
254 Points

Awesome thanks! So I've attempted to put my code into codepen. You'll see the code at the bottom of the css that I'm using to adjust the layout for responsive design. As I mentioned though as I increase my screen I have to refresh to make the nav sit right aligned.

https://gist.github.com/anonymous/66f00320ecab2418c0fc

Justin Horner
Justin Horner
Treehouse Guest Teacher
Justin Horner
Justin Horner
Treehouse Guest Teacher

Hello Kristin,

I'm researching your issue now. I think I'm on to something, but I'd like to know what browser you are testing the site with? Have you tried more than one browser? So far I have noticed that Chrome is having the most abnormal effect but in IE and Safari it seems to be behaving more like your expectation, I believe.

John Reed
John Reed
12,911 Points

So looking at the code real fast none of your images are floated or have any sort of width & height specified at that media query. When you float something it takes it out of the normal flow of the document.

A quick fix that I used that worked in Chrome & Firefox would be the following.

''' @media screen and (min-width: 750px) { /HEADER/

header { height: 150px; }

.logo, .line-image { float: left; }

nav { float: right; margin-left:-120px; padding-top:100px; } } '''