Media Query Does Not Work

Hey guys only my second post but pleased to say I achieved a result on the first one so while I am working on this “template” I will continue with my questions, ok I was pleased to get different colors in my columns and now understand I should have targeted the child of the parent for the changes. As mentioned I am working off a video and trying hard to emulate what I am seeing. At this point I have three columns and even spacing between using flexbox methods in the css. I think it may be easier to just show you what the next step of the video is that is not working for me? (the media query) I will show the existing css code and then the changes shown underneath

.call-outs-container{
box-sizing:border-box;
max-width:1200px;
margin: 0 auto;
display:flex;
justify-content:space-between;
}

The video goes onto explain to have the columns drop under each other we do a Media Query
which see’s me cut out the

display:flex;
justify-content:space-between;

from the .call-outs-container and paste it into a child of the Media Query as below

@media (min-width:900px) {
.call-outs-container {
display:flex;
justify-content:space-between;
}
}

When I do the change the columns revert to horizontal but do not go back to rows when scrolling back over 900px screen size. I wonder what I am doing wrong ? Thanks for all help thus far!

Hi, spaceroddy.

We need to see the HTML that goes with the CSS. More desirably, a “working page” that actually demonstrates the issue.

FYI, when you include HTML or CSS code in a post, please preceed the block of code with three backticks on a line by themselves and end it with three more backticks on a line by themselves, like this:

```
your code here
```

OR

copy and paste your code into the post, then highlight it and click the </> button in the editors’s menu to put the code in a box and keep its formatting.

Thanks

body { background-color:grey;
}



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

.call-outs-container{
box-sizing:border-box;
max-width:1200px;
margin: 0 auto;
display:flex;
justify-content:space-between;
}

<!-- the two lines above are cut into the media query-->

.call-out {
padding:20px;
box-sizing:border-box;
margin-bottom:10px;
flex-basis:30%;

}


.call-out:nth-child(1) { background-color:#c0dbe2;}
.call-out:nth-child(2) { background-color:#cdf1c3;}
.call-out:nth-child(3) { background-color:#ccb9da;}



<!--media query  gets the cut and paste-->

@media (min-width:900px) {
.call-outs-container {

}
}

It appears to be working here:-

Thanks I do appreciate your help and I can see what you are showing me via the codepen link, however after doing an ftp to HERE It only shows horizontal blocks for the entire width when I scroll inwards and outwards to full screen, I cleared my history and it is still the same ? It’s real bummer that I can’t see the change?

Validate your css. Use proper comments. You are marking comments as in html:-

<!-- This is where the dislay and justify for under 900 p x --

Try:-

/* This is a css comment */

And you have a comment not marked:-

MEDIA QUERY

Ah … i grabbed that from a practice template and forgot about that comment to myself, hey many thanks I just checked again and it worked after an edit, quite exciting to get a result. Pleased I have joined this forum, I am a member of Namepros and try to offer info to the new folk there so it’s nice to get a little help when I need it, thanks again!

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.