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 mryoung
mryoung
4,156 Points

What am I doing wrong with this media query?

I've always had trouble with media queries, for example.....

I have a base style for a flexbox container:

.flex-container {
    margin: 75px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Then I have a media query for mobile like this, which doesn't touch the container at all:

@media only screen (max-width : 739px) {
A bunch of styles here
}

Then I want the container to display as a row on anything bigger than my mobile query so I set my query like so:

@media only screen (min-width: 740px) {


.flex-container {
    flex-direction: row;
}

The container never changes to a row, it's always displayed in a column, regardless if I'm looking in Chrome at the mobile view, or I have the website at full screen (13 inch laptop). What am I missing?

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

Are the styles in this order? Also, what does it look like if you open up the dev tools and look at the styles in the Chrome dev tools, are there lines crossed out?

1 Answer

mryoung
mryoung
4,156 Points
mryoung
mryoung
4,156 Points

I’m not sure what you mean by the order. The desktop and mobile queries target the same things, but are listed in the order they appear on the screen and in the base styles.

I’m not able to look right now, but I saw some styles crossed out I think. What if I don’t see any?

mryoung
mryoung
4,156 Points

It’s all one sheet, currently I have the queries above the base styles (for ease of use).