Jump to content

Leaderboard


Popular Content

Showing content with the highest reputation on 08/05/2018 in all areas

  1. 1 point
    Applying opacity to a div affects everything within the div, including type and nested divs. Use background opacity via rgba() to do what you're wanting: body{ background: url("https://image.ibb.co/h93Ndo/abstract.jpg") top right no-repeat; background-attachment: fixed; } .body-container{ display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; background: red; color: white; min-height: 100vh; } .header{ flex-grow: 0; background: rgba(58, 152, 253, 1); } .two-cols{ flex-grow: 1; display: flex; flex-direction: row; justify-content: stretch; } .left-container{ display: flex; flex-direction: column; justify-content: flex-start; flex-grow: 1; flex-basis: 20%; background: rgba(59, 74, 83, 1); } .content{ display: flex; flex-direction: column; justify-content: flex-end; flex-grow: 1; flex-basis: 80%; background: rgba(255, 255, 255, .7); } Also, is there any reason why you needed to add the !important to the display rule on the .body-container div? @gizmola - apparently I'm going to need to read that article as well as I've not found float collapse to be an issue using flexbox. Or at least I've not recognized that that's what it is... Anyway - thanks for the link!
This leaderboard is set to New York/GMT-05:00
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up
×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.