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

Posted by Vassyl Machnev
Vassyl Machnev
4,298 Points

Media Queries Overriding Each Other

Hi, it's my first time asking something here and English isn't my native language so i hope you guys can understand me. Anyways, the question is : my Media Queries are overrding each other.I've looked on different forums and stuff but still i can't really grasp what is happening here. I've used it before and it worked as i expected but now it's acting really weird. Here's what i'm trying to achieve :

@media (min-width:320px ) {

header
{ 
    display:flex;
    flex-direction:column;
    align-items:center;
}

} @media (min-width: 1024px){ header{ display: flex; flex-direction:row; justify-content: space-between; } } So everything works just great with the header,but as soon as i get to the .main-content (class that holds my content columns ) it's starts to get really bad.

for the 320px screens (it should display as 1 column) .main-content { display:flex; flex-direction:column; }

for 1024px screens ( should display as a row ) .main-content { display:flex; flex-direction:row; } And here's the issue : it displays as a row no matter what. I would be really thankful if someone could explain what's going on. Thank's for reading all this text.

2 Answers

Cobe Learns
Cobe Learns
25,333 Points
Cobe Learns
Cobe Learns
25,333 Points

Hi,

i think you need to google "flex-wrap"

The flex-wrap property accepts 3 different values: nowrap (default): single-line which may cause the container to overflow, wrap: multi-lines, direction is defined by flex-direction, wrap-reverse: multi-lines, opposite to direction defined by flex-direction

you need to set 

flex-wrap: wrap;

hope it helps

Vassyl Machnev
Vassyl Machnev
4,298 Points

Hi! Thank's for your quick reply! So, if i understood it correctly setting flex-wrap:wrap will resolve my issue and the mobile layout will appear as a column? Thank's again!

Cobe Learns
Cobe Learns
25,333 Points
Cobe Learns
Cobe Learns
25,333 Points

I didnt run the code but i think wrap will resolve your problem

Vassyl Machnev
Vassyl Machnev
4,298 Points

Thank's again,i will try it and let you know!