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 Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Developer tools showing jumbled two and three column layout on laptop. Guil Hernandez can you help?

Hello,

I have finished an assignment for the front end web development techdegree. It looks fine on my laptop but in the developer tools on a laptop screen size, the two and three column layout of assignment two is jumbled. I have used flexbox columns to create this layout. Can you give me any suggestions of why this may be happening? I have tried reducing the image and font size to help it fit better, but it has not helped? Thank you in advance.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Does this only occur when the dev tools are open?

4 Answers

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Thank you

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Yes. I'm trying to rework my css now as I'm thinking there must be a mistake in it.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Just so I know, you are on your laptop, and you open the dev tools, they come out on the left side of the viewport, and then the layout gets messed up, but with out the dev tools open it looks fine. correct? how does the site look on mobie view?

Jacob Mishkin
Jacob Mishkin
23,118 Points

It could be because the dev tools is pushing your site to a smaller width size, and that could be the issue. Did you make your site mobile first?

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Hi it looks fine in mobile and in tablet but not laptop. I had a wrapper div in the wrong place so am hoping once I've fixed the css around it it will work!

Jacob Mishkin
Jacob Mishkin
23,118 Points

cool. if it doesn't work post the code that you are having issues with and please comment where the issue is so we can quickly help you.

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Hi I made it mobile first. Thanks for your help. I'll keep trying to fix it for a bit longer.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Not a problem, remember you can always post your code, if you get stuck.