Media Query is not working

Question

I’m using media query and when I try to resize the browser tab, the page is not responsive, it remains the same.

My responsive design code:

body{
    margin: 0;
}

p{
    padding: 10px;
}

h3{
    padding-left: 10px;
}

.topo{
    width: 100%;
    height: 100px;
    line-height: 100px;
    background-color: orange;
    text-align: center;
}

.cidade{
    width: 25%;
    float: left;
}

@media only screen and(min-width:500px) and (max-width:800px){
    .cidade{
        width: 50%;
    }
}

@media only screen and(max-width:500px){
    .cidade{
        width: 100%;
    }
}

<div class="topo">
    <h1>Guia Turistico</h1>
</div>

<div class="cidade">
    <h3>Cidade 1</h3>
    <p>skdfjhuf ygsfhdjsghdfjsfgdjhsg fjhsgfjsfg hjhsfgjsf ghjsfghdjs fghjsfghjsfg hjs fghjsfghjsfgh jsfghjsfhjsfghjhsfgdjhsfg jsghfjsd fghjsdfghjs dfgjsfgsjfghj fghsjdfg hsjfghsjfgh sjfghjsfghj sfghjhfgdjhfgj sfghjsgh fjsghfjsghfjsf ghjsfghjsfghjhs fgjsghfjsghf jsghfjsfgjh sjdfghsj fgjsfgh sjdg fjs fghdsj fghs gfjs fhjsf</p>
</div>

<div class="cidade">
    <h3>Cidade 2</h3>
    <p>skdfjhufygsfhdjsghdfj sfgdjhsgfjhsg fjsfgh jhsfgjsfghjsfghd jsfghjsfghjsf ghjsfgh jsfghjsfghj sfgh jsfhjsfg hjhsfgdjh sfg jsghfjs dfghj sdfghjsdfgj sfgs jfghjf ghsjd fghsjfg hsjfg hsjfghj sfghjsfghjhfgdjh fgjsfghjsghfj sghfjsg hfjsfghj sfg hjsfghjhsf gjsghfjs ghfjsghfj sfgjh sjdfghsj fgjsfgh sjdg fjs fghdsj fghs gfjs fhjsf</p>
</div>

<div class="cidade">
    <h3>Cidade 3</h3>
    <p>skdfjhufy gsfhdjsgh dfjsfgdj hsgfjhsgfj sfghj hsfgjsfghjsfgh djsfg hjsfgh jsfghjsfg hjsfg hjsfghjsfghjsfhjsf ghjhsfgdjh sfgjsghfjs dfghjsdfghjs dfgjsfg sjfghjf ghsjdfghs jfghsjfg hsjf ghjsfghj sfghjhfg djhfgj sfghjsghfjsg hfjs ghfjsfghjsf ghjsfgh jh sfgjsgh fjsgh fjsghfjsfgjh sjdfghsj fgjsfgh sjdg fjs fghdsj fghs gfjs fhjsf</p>
</div>

<div class="cidade">
    <h3>Cidade 4</h3>
    <p>skdfjhufy gsfhdjsgh dfjsfgd jhsgfj hsgf jsfghjh sfgjsfghj sfghdjsf ghjsfg hjsfghjs fghjsfg hjsfg hjsfghjsfh jsfghjh sfgdj hsfgjs ghfjsdfg hjsdfghj sdfgjsfg sjfghj fghsjdfghs jfghsj fghsjfgh jsfg hjsfgh jhfgdjhfgjs fghjsg hfjsghf jsghfjs fghjsf ghjsfghjh sfgjsghf jsg hfjsgh fjsfgjh sjdfghsj fgjsfgh sjdg fjs fghdsj fghs gfjs fhjsf</p>
</div>

Answer 1

Pretty simple, it wasn’t working because, you didn’t add a space (' ') in the first and after the screen.

Before:

@media only screen and(min-width:500px) and (max-width:800px){
    .cidade{
        width: 50%;
    }
}

@media only screen and(max-width:500px){
    .cidade{
        width: 100%;
    }
}

Afterward:

@media only screen and (min-width:500px) and (max-width:800px){
    .cidade{
        width: 50%;
    }
}

@media only screen and (max-width:500px){
    .cidade{
        width: 100%;
    }
}

Upshot:

body{
    margin: 0;
}

p{
    padding: 10px;
}

h3{
    padding-left: 10px;
}

.topo{
    width: 100%;
    height: 100px;
    line-height: 100px;
    background-color: orange;
    text-align: center;
}

.cidade{
    width: 25%;
    float: left;
}

@media only screen and (min-width:500px) and (max-width:800px){
    .cidade{
        width: 50%;
    }
}

@media only screen and (max-width:500px){
    .cidade{
        width: 100%;
    }
}

  <div class="topo">
    <h1>Guia Turistico</h1>
</div>
<div class="cidade">
    <h3>Cidade 1</h3>
    <p>skdfjhuf ygsfhdjsghdfjsfgdjhsg fjhsgfjsfg hjhsfgjsf ghjsfghdjs fghjsfghjsfg hjs fghjsfghjsfgh jsfghjsfhjsfghjhsfgdjhsfg jsghfjsd fghjsdfghjs dfgjsfgsjfghj fghsjdfg hsjfghsjfgh sjfghjsfghj sfghjhfgdjhfgj sfghjsgh fjsghfjsghfjsf ghjsfghjsfghjhs fgjsghfjsghf jsghfjsfgjh sjdfghsj fgjsfgh sjdg fjs fghdsj fghs gfjs fhjsf</p>
</div>

<div class="cidade">
    <h3>Cidade 2</h3>
    <p>skdfjhufygsfhdjsghdfj sfgdjhsgfjhsg fjsfgh jhsfgjsfghjsfghd jsfghjsfghjsf ghjsfgh jsfghjsfghj sfgh jsfhjsfg hjhsfgdjh sfg jsghfjs dfghj sdfghjsdfgj sfgs jfghjf ghsjd fghsjfg hsjfg hsjfghj sfghjsfghjhfgdjh fgjsfghjsghfj sghfjsg hfjsfghj sfg hjsfghjhsf gjsghfjs ghfjsghfj sfgjh sjdfghsj fgjsfgh sjdg fjs fghdsj fghs gfjs fhjsf</p>
</div>

<div class="cidade">
    <h3>Cidade 3</h3>
    <p>skdfjhufy gsfhdjsgh dfjsfgdj hsgfjhsgfj sfghj hsfgjsfghjsfgh djsfg hjsfgh jsfghjsfg hjsfg hjsfghjsfghjsfhjsf ghjhsfgdjh sfgjsghfjs dfghjsdfghjs dfgjsfg sjfghjf ghsjdfghs jfghsjfg hsjf ghjsfghj sfghjhfg djhfgj sfghjsghfjsg hfjs ghfjsfghjsf ghjsfgh jh sfgjsgh fjsgh fjsghfjsfgjh sjdfghsj fgjsfgh sjdg fjs fghdsj fghs gfjs fhjsf</p>
</div>

<div class="cidade">
    <h3>Cidade 4</h3>
    <p>skdfjhufy gsfhdjsgh dfjsfgd jhsgfj hsgf jsfghjh sfgjsfghj sfghdjsf ghjsfg hjsfghjs fghjsfg hjsfg hjsfghjsfh jsfghjh sfgdj hsfgjs ghfjsdfg hjsdfghj sdfgjsfg sjfghj fghsjdfghs jfghsj fghsjfgh jsfg hjsfgh jhfgdjhfgjs fghjsg hfjsghf jsghfjs fghjsf ghjsfghjh sfgjsghf jsg hfjsgh fjsfgjh sjdfghsj fgjsfgh sjdg fjs fghdsj fghs gfjs fhjsf</p>
</div>