The media query does not change styles on long screens

Question

The media query does not change styles on long screens

Navigation

#1 by (0 votes)

1

I have this code:

#game.row > .col {
    width: 100%;
    height: 50vh;
    float: left;
    padding: 15px;
}


@media screen (min-width: 40.0rem) {
    #game.row > .col {
        width: 50%;
        height: 100vh !important;
        float: left;
        padding: 15px;
    }
}

And at the moment that the screen is greater than 40rem: 640px, it does not leave the stop at 100vh but keeps it at 50vh and when the inspector sees it does not overwrite it and remains at 50vh. I do not know what happens.

css

asked by Federico Piragua Duran 31.07.2016 в 23:40

source

1 answer

Place name on image Unknown backup process - SQL SERVER

score 0 · Accepted Answer

The @media query is incorrect. It lacks a and between the device type and the condition and that's why it does not work. If you do the following:

@media screen and (min-width: 40.0rem) {

will already work without problems as you can see here ( or in this JSFiddle ):

#game.row > .col {
    width: 100%;
    height: 50vh;
    float: left;
    padding: 15px;
}

@media screen and (min-width: 40.0rem) {
    #game.row > .col {
        width: 50%;
        height: 100vh !important;
        float: left;
        padding: 15px;
    }
}

<table>
  <tr id="game" class="row">
    <td class="col">1</td>
    <td class="col">2</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>