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 CSS Flexbox Layout Building a Layout with Flexbox Creating a Three Column Layout with Flexbox

Mary Vixaisack
Mary Vixaisack
8,820 Points
Posted by Mary Vixaisack
Mary Vixaisack
8,820 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Sergejs Kozinecs
Front End Web Development Techdegree Student 5,422 Points
Sergejs Kozinecs
.a{fill-rule:evenodd;}techdegree
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;
    }
}