CODEWITHSUNDEEP
cssmedia-queries
Shirley Dodson
Shirley Dodson

Reputation: 339

Why is this Media Query not working?

I feel like I'm about to feel very silly in a second, but I can't for the life of me figure out what's wrong with my media query. I'm using Adobe's Brackets as my code editor, and originally thought there was a glitch in the program. But then I tested the code in jsFiddle and it's not working there either, so I must be fudging something up with the code.

Can anyone see what's wrong?

Here is my jsFiddle

HTML

<div class="helpful">

<span class="thumb">Did you find this helpful?</span>
<span class="readers">82 Readers found this helpful</span>

</div>

CSS

.helpful .readers {
    color: #35cb1a;
    font-size: .9em;
}

.helpful .thumb {
    float: right;
    color: #7b7b7b;
    font-size: .9em;
}

@media screen and (max-width: 1020px) {

    .helpful .readers,
    .helpful .thumb {
        display: block;
        margin: auto;
     }
 }

Upvotes: 0

Views: 63

Answers (2)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

you code is perfectly fine as you want to centre align those div after some 1020px width and for that you have use this css

@media screen and (max-width: 1020px) {

    .helpful .readers,
    .helpful .thumb {
        display: block;
        margin: auto;
     }
 }

But you always need to mention width if you are using margin:auto.

I am assuming width of 200px so css should be like this

@media screen and (max-width: 1020px) {

    .helpful .readers,
    .helpful .thumb {
        display: block;
        margin: auto;
        widht:200px;
     }
 }

Working fine in this fiddle https://jsfiddle.net/vgrtety9/3/

Upvotes: 1

BoltClock
BoltClock

Reputation: 723388

display: block; margin: auto on elements with no specified width has no effect, since blocks with auto width stretch to the full width of their container leaving no room for margins.

Furthermore, auto margins have no effect on a floated element, and a floated element is display: block by definition.

So your media query is working, but the styles in it don't have any apparent effect on the given layout.

  • If you want the floated element to stop floating at 1020px and narrower, you need to override the float declaration.
  • If you want the text to be centered, use text-align: center instead of margin: auto.
  • If you want the two elements to stack vertically, keep the display: block declaration.

Putting it all together:

@media screen and (max-width: 1020px) {
    .helpful .readers,
    .helpful .thumb {
        display: block;
        text-align: center;
    }

    .helpful .thumb {
        float: none;
    }
}

Upvotes: 1

Related Questions