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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Catherine Khvorost
Catherine Khvorost
7,446 Points

My 'contact' page sections are not stacking on top of one another when I resize the browser to the mobile version.

My contact sections are separated side by side like they are supposed to be for the tablet/browser version. When I change my browser to a smaller size, they're not stacking on top of each other like in Nick's example of the mobile version. Not sure why? I have listed my code below. Check responsive.css and contact.html. Thank you!

https://w.trhou.se/rnlqmbsurb

1 Answer

Claudiu Bancos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points

When I first tried it they appeared stacked to me at browser widths of 462px and smaller (rather than 479px). I think the difference came from the ~17px width of the scroll bar that appears when they stack, and the way the browser calculates that as not part of the viewport window?

But your media query seems to work fine otherwise.

Catherine Khvorost
Catherine Khvorost
7,446 Points

Thank you for your help Claudiu. I switched to a different browser-one where I was able to make the desktop smaller and and it worked.