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
Stephanie Burrows
7,251 PointsHow do I get divs to expand 100% of parent div + floating layout design questions.
I'm having the hardest time with getting my ".fourty" div inside its parent div to expand to 100%. It seems ok, and then at certain points when adjusting the size of the window it will change size. I am also trying to get the content inside my .block-1-3 divs vertically centered. I want to also hide this entire ".fourty" div from the mobile version and "display: none;" is not working. Not sure where I'm going wrong!
This is my first little project for a friend, so still in the early phases of learning. I changed all the colors to see what was going on better, and haven't styled the header.
Picture of Divs changing size
2 Answers
Chris Reeder
11,358 PointsHey Stephanie,
Have you checked out Basics CSS course? It talks about how to use @media queries so you can hide content depending on the size of the screen viewing the content.
As for vertical centering. Treehouse has a course on using flexbox, which is a bit more advanced. Or if you do a little google search this article helped me out with that:
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Sorry for no exact answers, I just think it sticks better when you find it and apply it yourself
Have fun and hoped this helped!
Chris
Roy Penrod
19,810 PointsIn the CSS Layouts course, there's a section on using Flexbox and how to test for it using a small piece of Javascript code you can download called Modernizr.
There's also a great section on setting up your own grid system, which could help you with this problem.
Here's the url for the CSS Layouts course: http://teamtreehouse.com/library/css-layout-techniques
Stephanie Burrows
7,251 PointsStephanie Burrows
7,251 PointsI do have media queries set up but this problem with the divs happens at any size over 660px. It is set at 100% fine, but as I make the screen smaller I see it jumping for a split second, and then it'll go back to 100%. I've been trying fixes for a few days now and can not figure it out!
I originally wanted to use flex-box but chose against it because of its lack of support on all browsers. I'm not really sure when it's appropriate to use it? Or if I should just keep fallbacks in mind for browsers its not supported on. The link you posted for centering did work though, thank you! :)