CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Three Column Layout with Flexbox

Mary Vixaisack
Mary Vixaisack
8,224 Points

Adding 3rd column to screen size of 1025 or greater.

I followed along with the video and doesn't appear to add the 3rd column when the screen size is 1025 or larger. Can someone please help?

@media (min-width: 769px) {

.main-header, .main-nav, .row { display: flex; }

.col { flex: 1 50%; }

.row { flex-wrap: wrap; }

}

@media (min-width: 1025px) {

.main-header { flex-direction: row; justify-content: space-between; }

.col { flex-basis: 1; } }

1 Answer

Sergejs Kozinecs
Sergejs Kozinecs
Front End Web Development Techdegree Student 5,422 Points

I think you need to set flex-basis to 0. Like this, if I correctly understood the question.

@media (min-width: 1025px) {
    .main-header {
        flex-direction: row;
        justify-content: space-between;
    }
    .col {
        flex-basis: 0;
    }
}