媒体查询不适用于实时服务器，但它适用于本地

Question

So, this is my issue. I think i've tried all the fixes I've seen on similar topics, but nothing seems to work and I don't understand why. It's my first deployment of a website aswell. Also my first attempt at making a mobile first site, with the idea of making it look like an app.

https://styleplace.pt

On the "Sobre nós" section of the page, I have an h2 and 2 p, and I want to show only one of the p's on mobile and everything in desktop . But on the deployed page, it doesn't work. Warning: the code is a little more rought in this part of the site because of all the fixes i've been trying to implement.

I'm leaving here a little bit more code than exactly the 3 elements in question, since I don't know if the parent elements can have something to do with it or not ( im really out of ideas on this one).

HTML

 .sobreTexto { border-radius: 3rem 1rem 1rem 1rem; width: 80%; height: 23vh; background: #111; display: flex; flex-direction: column; justify-content: space-around; padding: 1.2rem 1.2rem 1.2rem 1.2rem; box-shadow: -0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.2); } .sobreSoDesktopH2 { color: white; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.2rem; padding-bottom: 0.5rem; display: none; } .sobreSempre { width: 63%; font-size: 0.8rem; color: white; font-family: "Poppins", sans-serif; } .sobreSoDesktop { width: 63%; font-size: 0.8rem; color: white; font-family: "Poppins", sans-serif; display: none; } .sobreEmBaixo { height: 33vh; } .sobrePic { width: 35vw; height: 35vh; z-index: 20; background: #fff; box-shadow: -0.5rem 0.5rem 1rem 0px rgba(0, 0, 0, 0.2), 0.5rem 0px 1rem 0px rgba(0, 0, 0, 0.2); border-radius: 4rem 1rem 2rem 1rem; position: absolute; right: 6vw; top: calc(11.5vh - 17.0vh); display: flex; align-items: center; justify-content: center; transition: 0.3s; } @media (min-width: 1025px) { .sobreSoDesktop { display: block; } .sobreSoDesktopH2 { display: block; } }

 <div class="sobre"> <div class="caption2"> <p>Sobre nós</p> </div> <div class="sobreEmBaixo"> <div class="flexContainer2"> <div class="sobreTexto"> <h2 class="sobreSoDesktopH2">Davi Jonatas:</h2> <p class="sobreSempre"> Trabalhei em uma barbearia quando cheguei a Portugal, há 3 anos atrás e venho buscando evoluir profissionalmente, trazer <strong>conforto</strong> e <strong>qualidade</strong> nos nossos serviços e trazer também aos nossos clientes o melhor atendimento. </p> <p class="sobreSoDesktop">Estamos sempre nos atualizando para chegar na nossa melhor versão e nossa motivação vem da satisfação dos nossos clientes e amigos.</p> </div> <div class="sobrePic"> <img srcset=" imgs/Fotos/2juntos.jpeg 1125w, imgs/Fotos/2juntos_230x230.png 230w, imgs/Fotos/2juntos_394x400.png 394w " src="imgs/Fotos/2juntos.jpeg" alt="Davi e Gedeão Jonatas, barbeiros juntos"> </div> </div> </div> </div>

If someone could help me, that would be amazing. Thank you

Answer 1

The CSS you gave us works. It's just that you don't actually have that CSS on your website.

How can I see that?

Inspect Element > Sources > CSS > *style.css

Once you're in the file, I just added this code at the bottom, and it worked :^)

.sobreSoDesktop{
    display:none;
}
@media (min-width: 1025px) {

  .sobreSoDesktop {
      display: block;
  }

  .sobreSoDesktopH2 {
      display: block;
  }
}

This is all the CSS I can find in related to any @media query

@media (min-width: 1025px) {
    .cardEquipa {
        width: 25vw;
    }
    .sobrePic img {
        object-position: 0rem -1rem;
    }
    .linearBackground {
        justify-content: flex-start;
    }
    .textoLocalizacao {
        padding-left: 10vw;
    }
    .mapa {
        padding-left: 40vw;
    }
    .servicinho {
        flex-direction: row;
        width: 20vw;
        height: 20vh;
    }
    .imagemServicinho {
        height: 10vh;
        width: 10vh;
        padding-left: 1rem;
    }
    .imagemServicinho img {
        width: 10vh;
        height: 10vh;
    }
    .servicinhoIgual {
        display: block;
    }
    .servicinhoPreco {
        padding-right: 1rem;
    }
    .redesSociais {
        width: 20%;
    }
}