Estou com problema no @media (responsividade)

marcelo_mozart · Abril 25, 2020, 11:07pm

Pessoal, boa noite!
Eu vou postar aqui os códigos CSS e Hltm que estou trabalhando. Tenho dois problemas: 1- O link do whatsApp é o mesmo que estou usando em cada card (são 4 cards), em 2 deles o link funciona e em outros 2 não. Sendo que o código é igual para os 4 cards. 2- Outro problema é o código de responsividade. No @media (max-width:620px) código funciona e quando eu usso os mesmos parâmetros para @media (min-width:621px).

Obs: estou desenvolvendo com o bootstrap

Html:

<body>
      
<div>
    <!--Header -->
    <picture>
 
    <source media="(max-width:480px)" srcset="assets/bg-phone.png" class="img-fluid" width=100%>
    <source media="(max-width:780px)" srcset="assets/bg-tablet.png" class="img-fluid" width=100%>
    <source media="(min-width:800px)" srcset="assets/bg-topo3.jpg" class="img-fluid" width=100%>
    <img src="../image/bg-topo3.jpg"  class="img-fluid"width=100%>

    </picture>
   
</div>
   
<!--Preços -->
      
<div class="spaceDiv" >
    <picture id="faixa2">
      <source media="(max-width:480px)" srcset="assets/faixa2-mobile.png" width=110%>
      <source media="(max-width:780px)" srcset="assets/faixa2.png" width=100%>
      <source media="(min-width:950px)" srcset="assets/faixa2.png" width=100%>
      <img src="assets/faixa2.png" width=90%>
    </picture>
    
</div >
      
<!--Cards Diferenciais -->     
       
<div class="container spaceDivCard">
    
<div class="card-deck justify-content-sm-center">
    
    <div class="row col-sm-12 col-md-6 col-lg-3 ">
            <div class="card shadow mb-5">
                <img src="assets/faixa3-1.png" class="card-img-top aument-transi" alt="produto">
                <div class="card-body">
                    <h5 class="card-title"><center>SATISFAÇÃO DO CLIENTE</center></h5>
                    <p class="card-text"><center>Este sempre foi o foco da Hidra Bebedouros. Prova disso é que temos<br><b>ZERO RECLAMAÇÕES</b><br> no Procon ou no Reclame Aqui</center></p></div>
                    <div class="card-footer">
                    <center><a href="https://wa.me/5511994731204?text=Olá%20,%20 gostaria%20 de%20 mais%20 informações!%20"  target="_blank" class="btn btn-info">Saiba Mais</a></center></div>
            </div>
    </div>
      
    <div class="row col-sm-12 col-md-6 col-lg-3">
            <div class="card shadow mb-5">
                    <img src="assets/faixa3-2.png" class="card-img-top aument-transi" alt="produto">
                    <div class="card-body">
                    <h5 class="card-title"><center>TÉCNICOS COMPETENTES</center></h5>
                    <p class="card-text"><center>A cada 10 avaliações feitas pelos clientes atendidos, 9 recebem <b>NOTA MÁXIMA</b> e isso reflete na satisfação e fidelização de todos nossos clientes</center></p></div>
                     <div class="card-footer">
                    <center><a href="https://wa.me/5511994731204?text=Olá%20,%20 gostaria%20 de%20 mais%20 informações!%20"  target="_blank" class="btn btn-info">Saiba Mais</a></center></div>
                    
            </div>
     </div>

     <div class="row col-sm-12 col-md-6 col-lg-3">
            <div class="card shadow mb-5">
                    <img src="assets/faixa3-3.png" class="card-img-top aument-transi" alt="produto">
                    <div class="card-body">
                    <h5 class="card-title"><center>AGILIDADE E RAPIDEZ</center></h5>
                    <p class="card-text"><center>89% de todas nossas Ordens de Serviços são atendidas in loco (dentro do cliente) Nosso atendimento acontece entre <b>24h e 72h, após a solicitação</b> ou confirmação da venda</center></p></div>
                     <div class="card-footer">
                    <center><a href="https://wa.me/5511994731204?text=Olá%20,%20 gostaria%20 de%20 mais%20 informações!%20"  target="_blank" class="btn btn-info">Saiba Mais</a></center></div>
                   
            </div>
    </div>
    <div class="row col-sm-12 col-md-6 col-lg-3">
                 <div class="card shadow mb-5">
                    <img src="assets/faixa3-4.png" class="card-img-top aument-transi" alt="produto">
                    <div class="card-body">
                    <h5 class="card-title"><center>GARANTIA TOTAL</center></h5>
                    <p class="card-text"><center>A única oficina de São Paulo que oferece Garantia de 180 dias (Mão de Obra) 90 dias para garantia de peças, ou seja, se alguma peça apresentar defeito, trocamos para você SEM CUSTO ALGUM</center></p></div>
                    <div class="card-footer">
                    <center><a href="https://wa.me/5511994731204?text=Olá%20,%20 gostaria%20 de%20 mais%20 informações!%20"  target="_blank" class="btn btn-info">Saiba Mais</a></center></div>
                    
                </div>
     </div>
</div>

      </div>
        

<!--Avaliação dos clientes - Carosel -->
      
<div id="avaliacao">
    <div id="texto1">
        Veja a OPINIÃO dos NOSSOS CLIENTES
    </div>
    
    <div id="modelo-avaliacao">
    <img src="assets/modelo-avaliacao.png" width= 53%>
    </div> 
    
<div id="carroceu" class="carousel slide" data-ride="carousel">
        
        <ol class="carousel-indicators">
            <li data-target="#carroceu" data-slide-to="0" class="active"></li>
            <li data-target="#carroceu" data-slide-to="1"></li>
            <li data-target="#carroceu" data-slide-to="2"></li>        
        </ol>
        
        <div class="carousel-inner">
            
            <div class="carousel-item active">
                <img src="assets/avaliacao.png" class="img-fluid d-block">
            </div>
            
            <div class="carousel-item">
                <img src="assets/avaliacao1.png" class="img-fluid d-block">
            </div>
            
            <div class="carousel-item">
                <img src="assets/avaliacao2.png" class="img-fluid d-block">
            </div>
        </div>
        
        
        <a class="carousel-control-prev" href="#carroceu" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
            <span class="sr-only">Anterior</span>
        </a>
        
        <a class="carousel-control-next" href="#carroceu" role="button" data-slide="next">
        <span class="carousel-control-next-icon"></span>
        <span class="sr-only">Próximo</span>
        </a>
</div>

<div id="texto2">
    <div id="texto2-texto2">Nosso sistema registra EM TEMPO REAL a opinião do cliente ao final de cada serviço</div>
</div>

 </div>


 
      
      
      
      
      
      
      
      
      
      

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/popper.js/dist/popper.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0; 
}

body {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden; 
}


/* Preços */

#faixa2 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.spaceDiv {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 2%;
  margin-bottom: 4%;
 }



/* Cards Diferenciais */

.spaceDivCard {
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 2%;
  margin-bottom: 2%;

}

.aument-transi:hover{
    transform: scale(1.01);
    transition: 0.4s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}
.aument-transi:hover::before{
    opacity: 5;
}



/* Depoismento e avaliações dos clientes */

#avaliacao{
    width: 100%;
    height: 465px;
    background: -webkit-gradient(linear, left top, right top, from(#fdfffc), to(#a4cfd3)) no-repeat;
    background: -moz-linear-gradient(left, #fdfffc, #a4cfd3);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#fdfffc', EndColorStr='#a4cfd3'); 
}

#modelo-avaliacao{
    margin-left: 0;
    margin-left: 0;
    position: relative;
    top:-5%;
    left:0;
    float: left;
}
#texto1{
    position: relative;
    top:-5%;
    width: 650px;
    height: 90px;
    background-color: #006699;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: left;
    font-size: 24pt;
    letter-spacing: 0.01px;
    padding: 1.5% 1%;
    color: #F19201;
}

#texto2{
    position: relative;
    top:73%;
    left:55%;
    width: 600px;
    height: 90px;
    background-color: #006699;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
    font-size: 20pt;
    letter-spacing: 0.01px;
    color: #F19201;
   
}
 
#texto2-texto2{
    position: relative;
    top:-807%;
    left:1%;
}


#carroceu{
    position: relative;
    top:-87%;
    left:40%;
    width: 800px;
    height: 332px;
    float: left;
    
}


/* Responsividade Carosel */

@media (max-width:620px){


#avaliacao{
    width: 100%;
    height: 450px;
    background: -webkit-gradient(linear, left top, right top, from(#fdfffc), to(#a4cfd3)) no-repeat;
    background: -moz-linear-gradient(left, #fdfffc, #a4cfd3);
   filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#fdfffc', EndColorStr='#a4cfd3'); 
}

#modelo-avaliacao{
 display: none;
}
    
#texto1{
    position: relative;
    top:-5%;
    width: 350px;
    height: 50px;
    background-color: #006699;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: left;
    font-size: 12pt;
    letter-spacing: 0.01px;
    padding: 2.5% 0%;
    color: #F19201;
}

#texto2{
    position: relative;
    top:78%;
    left:25%;
    width: 300px;
    height: 70px;
    background-color: #006699;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
    font-size: 11pt;
    letter-spacing: 0.01px;
    color: #F19201;
    padding: 2.5% 2%;
   
}
 
#texto2-texto2{
    position: relative;
    top:-462%;
    left:1%;
}


#carroceu{
    position: relative;
    top:2%;
    left:1.5%;
    width: 400px;
    height: 232px;
    background-color: grey;
    float: left;
    
}
    
    
    
@media (min-width:621px){
    

#avaliacao{
    width: 100%;
    height: 420px;
    background: -webkit-gradient(linear, left top, right top, from(#fdfffc), to(#a4cfd3)) no-repeat;
    background: -moz-linear-gradient(left, #fdfffc, #a4cfd3);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#fdfffc', EndColorStr='#a4cfd3'); 
}

#modelo-avaliacao{
 display: none;
}
    
#texto1{
    position: relative;
    top:-5%;
    width: 350px;
    height: 50px;
    background-color: #006699;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: left;
    font-size: 12pt;
    letter-spacing: 0.01px;
    padding: 2.5% 0%;
    color: #F19201;
}

#texto2{
    position: relative;
    top:78%;
    left:25%;
    width: 300px;
    height: 70px;
    background-color: #006699;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
    font-size: 11pt;
    letter-spacing: 0.01px;
    color: #F19201;
    padding: 2.5% 2%;
   
}
 
#texto2-texto2{
    position: relative;
    top:-462%;
    left:1%;
}


#carroceu{
    position: relative;
    top:2%;
    left:1.5%;
    width: 200px;
    height: 232px;
    background-color: grey;
    float: left;
    
    }
    }

Estou com problema no @media (responsividade)

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI