Lab: CSS Flex
- Due Oct 29, 2021 by 11:59pm
- Points 3
- Submitting a file upload
- File Types css
After finishing the float lab, there's still a CSS bug!
When we shrink the browser width the orange section doesn't fit right. There is no way we can make block floats work to expand that orange area to fill that space while allowing the browser to resize.
Let's solve the problem with flex.
1. We need to change the parent container from block to flex to allow its children to have spongy widths. Not sure which element is the parent? It's the one that contains the logo, login, message elements.
2. Go to the ruleset targeting span.message above and give it a property to make it grow as much as it can (recall its parent is a flex container).
3. The float properties on logo, login, message, etc are ignored with flex. Cleanup the code and remove those rules.
4. The header span.message width is ignore with its grow property. Cleanup the code and remove its width.
5. Fix the order of the header elements in the HTML.
Test out shrinking your browser down to 350px wide by grabbing the edge of the chrome dev tools and dragging it over.