0

En mi código los <input> y el botón enviar del formulario me quedan deshabilitados cuando reduzco el navegador a menos de 600px que es uno de los breakpoints que establecí

Intenté varias cosas, pero nada me dio resultado

  • Aumentar el height del <input>
  • Cambiar en CSS el display:flex a display: block
  • Quitar los <label> de los <input>

¿Alguien puede echarle un vistazo a ver si saben qué sucede?

@import url(//db.onlinewebfonts.com/c/ed5050574c9de07c7d0a559f8c6a02a7?family=AR+BERKLEY);



*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

#aclaracion{
    
    width: 30%;
    
    background: linear-gradient(25deg, rgba(80,129,53,1) 0%, rgba(140,201,48,1) 87%, rgba(255,245,245,1) 100%);

    color:white;
    font-size: 1.5em;
    padding: 3% 2% 2% 2%;
    
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    
}
#aclaracion h2{
    font-size: 2em;
    text-align: center;
    padding-bottom: 3%;

}
aside{
    display: flex;
}
.croack{
    color: #508135;
    font-weight:600;
    font-family: sans-serif;
}
footer{
    background-color:rgba(140,201,48,1);
    
    
    /* margin-top:3%; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5%;

}
footer>address{
    font-size:1.5em;
    color:white;
}
footer>div>a>img{
    overflow: hidden;
}
#formulario {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    background-image: url(../imagenes/fondo_formulario.jpg);
    background-size: cover;
}
#formulario button{
    background-color:  #508135;
    color: white;
    margin-top:  2%;
    font-size:1.5em;
    border-radius:5px;
    padding:2% 4%;
  }
#formulario_foto{
    width: 50%;
    display: flex;
    align-items: center;
}
#formulario_foto img{
    width: 100%;
}
 #formulario form{ 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 50%;
    padding: 2%;
    background-color: rgba(255, 255, 255, 0.02);
        
 }
 #formulario form>h1{
     color: #508135;
     font-size: 2em;
 }
#formulario form>input, #formulario form>textarea {
    width:80%;
}
#formulario form>label{
    font-size:1.5em;
    /* align-self: flex-start; */
}
.fumigaciones{
    font-weight: 600;
    font-size: 1.25em;
    color: rgb(73, 73, 73);
    font-family: "AR BERKLEY";
 }
 #gracias{
     width: 30vw;
     color: #4e4c4c;
     background-color: rgba(255,255,255,0.5);
     height: 40vh;
     border-radius: 10px;
     padding:2%;
     font-size:1.5em;
     text-align: center;
     box-shadow: 5px 2px 5px #4e4c4c ;
     
 }

 #gracias span{
     display: block;
     font-size:1.75em;
     margin-bottom: 1.5%;
     color: #508135;
     font-weight: 500;
 }
 #gracias_contenedor{
    display: flex;
    justify-content: center;
    align-items:center;
    width:100vw;
    height: 100vh;
    background-image: url(../imagenes/fondo_formulario.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    
    
 }
 #hamburguesa{
     font-size:1.5em;
     display: none;
 }
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
   
    
    background: #F0F3F0;
background: -webkit-linear-gradient(right, #F0F3F0, #FFFFFF);
background: -moz-linear-gradient(right, #F0F3F0, #FFFFFF);
background: linear-gradient(to left, #F0F3F0, #FFFFFF);




}

header> h1{ 
    /* color:transparent; */
    background-image: url(../imagenes/logo_rana.png) ;
    width:234px;
    height: 104px;
    
}
header>h1>a{
    color:transparent;
    display: block;
    height: 100%;
}


header nav ul {
    display: flex;

}
header nav ul li {
    margin: 0 1rem;
    list-style: none;
    
}
header nav ul li a {
  text-decoration:none;
  font-size:1.5rem;
  color:black;
    
}

#inicio{
    
    font-size:1em;
    color: #508135;
    text-decoration: none;
}
#inicio:hover{
    
    text-decoration: underline;
    font-weight: 600;
   
}
#inscripcion{
    width: 30%;
    
}
#inscripcion p{
    font-size:1.5em;
    border-bottom: 3px solid #999999;
}
#inscripcion p>span{
    font-weight: 900;
    display: block;
}

input, textarea{ 
    border-radius:10px;
}
img[src="imagenes/twitter.png"], img[src="imagenes/facebook.png"], img[src="imagenes/instagram2.png"]{
    width: 10%;
}
#justicia{
    background-image: url(../imagenes/justicia.jpg);
    width:200px;
    height: 299px;
    margin:auto;
    display: flex;
    justify-content: center;
}
#legales{
    padding-bottom: 3%;
}
#legales_info{
   
    display: flex;
    justify-content: space-around;
}
#legales h1{
    display: block;
    margin:auto;
    text-align: center;
    background-color: #508135;
    width:20%;
    color:white;
    font-size:2em;
    padding: 1%;
    margin-top:2%;
    
}
#maps{
    width: 100%;
    height: 500px;
    display: flex;
}

.padding{ 
    
    padding: 1% 1% 2% 1%;
    
   
}
#section1{
    min-width: calc(100vw- 4%);
    font-size: 2.5em;
}


#section1 picture>img{
    width: 100%;
   
}



#servicios article{
    width: 80vw;
    
    box-shadow:0px 4px 11px 0px     #999999;
    margin: 3% auto 3% auto;
    padding: 2%;
    max-height: 100%;
    display: flex;
    
}
#servicios article picture {
    width: 50%;
    
}
#servicios article picture img{
    width: 100%;
}

#servicios article>div{
    padding: 1%;
    text-align: center;
    width: 50%;
    min-width: 50%;
}

#servicios article>div>h1{
    color:#508135;
    font-size:2.5em;

}
#servicios article>div>p{
    
    font-size:2em;
    margin-top:3%;
   
}

#social-media>span>a{
    
    color:white;
    font-size: 3em;
    
}

#quienes_somos{
    margin-top: 3% ;
    margin-bottom:3%;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#quienes_somos h1{
    text-align:center;
    background-color: rgba(140,201,48,1);
    color: white;
    width:30vw;
    margin:auto;
    
}
#quienes_somos picture{
   z-index:1; 
   width: 60vw;
   
}
#quienes_somos picture>img{
    width: 100%;
   
    
 }


#quienes_somos p{
    
    margin-top:-3%;
    column-count:2;
    column-gap:3%;
    column-rule: 5px solid  rgb(228, 224, 224);
    border:1px solid rgb(228, 224, 224);
    padding: 6% 3% 3% 3%;
    text-align: justify;
}

@media screen and (max-width:1091px){
    
    #servicios {
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
    }

    #servicios article{
        flex-direction: column;
        width: 45vw;
        
        

    }
    #servicios article>div, #servicios article>picture{
        width: 100%;
    }

    #servicios article:first-child>picture, #servicios article:nth-child(3)>picture{
        order:0;
    }
    #servicios article:first-child>div, #servicios article:nth-child(3)>div{
        order:1;
    }
}

@media screen and (max-width:825px){
    aside{
        flex-direction: column;
        flex-wrap: nowrap;

    }
    #formulario {
        width: 100%;
        order:1
    }

    #formulario_foto{
        width:100%;
        order:0;
        
    }
    
}

@media screen and (max-width:774px){
    #servicios {
        display: flex;
        flex-direction: column;
        
    }

    #servicios article{
        width:90vw;
    }
    #legales_info{
        flex-direction: column;
        align-items:center;
    }
    #inscripcion{
        width:60%;
    }
    #aclaracion{
        margin-top:3%;
        width:60%;
    }

}

@media screen and (max-width:600px){
    #aclaracion{
        width: 90%;
    }
    footer>address{
        text-align: center;
    }


    header h1{
        background-image: url(../imagenes/logo_rana_reducido.png) ;
        width:230px;
        height: 67px;
    }
    
    

    #justicia{
        display: none;
    }
    #legales h1{
        margin-bottom: 1%;
        
    }
    #quienes_somos h1, #legales h1{
        width:90vw;
    }
    #quienes_somos> p{
        column-count: 1;
        border:none;
    }

    #quienes_somos picture{
       display: none;
        
   

    
    }

    footer{
       
        flex-direction: column;
        justify-content: center;
    }

   
    /* Menú hamburguesa*/
    #hamburguesa{
        display: block;
        order:1;
       
    }
    #hamburguesa li{
        line-height: 80px;
        
    }
    
    #botones{
        background-color:rgb(140,201,48);
        width: 100%;
        height: 100vh;
    }
    
    #botones li>a{
        color:white;
        display: block;
        text-align: center;
        font-size:2em;
        padding: 1em 0; 
        

    }
    header{
        display: flex;
        justify-content: space-between;
        height: 80px;
    }
    header> h1{
        
        height: 100%;
        margin:auto;
        
    }
    header>h1>a{
        display: block;
    }

    header> nav{
       
        position: absolute;  
        top: 0;
        left:0;
        width:100%;
        height: 100vh;
         
        
    }
  
    header>nav>ul{
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }

    nav:target #botones{ display: block; }
     #botones{ display: none; } 
    
     #hamburguesa li:last-child { display: none; }
    nav:target #hamburguesa li:first-child{ display: none; }
    nav:target #hamburguesa li:last-child{ display: block; }

}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contacto</title>
    <link rel="stylesheet" href="css/estilos.css">
    
</head>
<body>
    <header class="padding">
        <h1>
            <a href="index.html"> Fumigaciones</a> 
        </h1>
       
        <nav id="barra">
            <ul id="hamburguesa">
                <li><a href="#barra"> <i  class="fas fa-bars"></i> </a></li>
                <li><a href="#">   <i  class="fas fa-bars"></i> </a></li>
            </ul>
            <ul id="botones">
                
                <li> <a href="servicios.html" target="_blank"> Servicios</a>  </li>
                <li> <a href="legales.html" target="_blank">Legales</a></li>
                <li> <a href="contacto.html" target="_blank"> Contacto</a></li>
            </ul>
           
            
        </nav>

        
    </header>

    <aside>
        
        <div id="formulario">
            
            <form action="gracias.html">
                <h1>Contáctenos</h1>
                <label for="nombre">Nombre y Apellido</label>
                <input type="text" id="nombre">
                <label for="correo">Correo Electrónico</label>
                <input type="email" id="correo">
                <label for="consulta">Envíe su consulta</label>
                <textarea name="consulta" id="consulta" cols="30" rows="10"></textarea>

                <button>Enviar</button>

            </form>
        </div>
            
        <picture id="formulario_foto">
            <img src="imagenes/control_de_plagas_ajustada.jpg" alt="fumigacion">
        </picture>
    </aside>

    <iframe id="maps" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3284.0041936355615!2d-58.39817038519524!3d-34.60405546502211!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bccaea5df5d30b%3A0xc697ad49a94641ca!2sAv.%20Corrientes%202037%2C%20C1045%20AAC%2C%20Buenos%20Aires!5e0!3m2!1ses!2sar!4v1613397132814!5m2!1ses!2sar"    style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

    <footer>
        <address>
            <p> Av Corrientes 1080</p> 
            <p> 5134-5768</p> 
        </address>
        <div id="social-media">
            <span>
                <a href="https://www.instagram.com/"><i class="fab fa-instagram-square"></i></a> 
            </span>

            <span>
                <a href="https://www.facebook.com/"><i class="fab fa-facebook-square"></i></a> 
            </span>

            <span>
               <a href="https://twitter.com/"><i class="fab fa-twitter-square"></i></a> 
            </span>

            
            
        </div>

        
    </footer>
</body>

1 respuesta 1

0

Es debido a que en el media screen de <600px tienes puesto que header> nav sea con un height del 100%, por lo que se te queda por encima y estas haciendo click a la navbar en vez del formulario. Te adjunto el css rectificado!

Espero haberte ayudado

@import url(//db.onlinewebfonts.com/c/ed5050574c9de07c7d0a559f8c6a02a7?family=AR+BERKLEY);



*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

#aclaracion{
    
    width: 30%;
    
    background: linear-gradient(25deg, rgba(80,129,53,1) 0%, rgba(140,201,48,1) 87%, rgba(255,245,245,1) 100%);

    color:white;
    font-size: 1.5em;
    padding: 3% 2% 2% 2%;
    
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    
}
#aclaracion h2{
    font-size: 2em;
    text-align: center;
    padding-bottom: 3%;

}
aside{
    display: flex;
}
.croack{
    color: #508135;
    font-weight:600;
    font-family: sans-serif;
}
footer{
    background-color:rgba(140,201,48,1);
    
    
    /* margin-top:3%; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5%;

}
footer>address{
    font-size:1.5em;
    color:white;
}
footer>div>a>img{
    overflow: hidden;
}
#formulario {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    background-image: url(../imagenes/fondo_formulario.jpg);
    background-size: cover;
}
#formulario button{
    background-color:  #508135;
    color: white;
    margin-top:  2%;
    font-size:1.5em;
    border-radius:5px;
    padding:2% 4%;
  }
#formulario_foto{
    width: 50%;
    display: flex;
    align-items: center;
}
#formulario_foto img{
    width: 100%;
}
 #formulario form{ 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 50%;
    padding: 2%;
    background-color: rgba(255, 255, 255, 0.02);
        
 }
 #formulario form>h1{
     color: #508135;
     font-size: 2em;
 }
#formulario form>input, #formulario form>textarea {
    width:80%;
}
#formulario form>label{
    font-size:1.5em;
    /* align-self: flex-start; */
}
.fumigaciones{
    font-weight: 600;
    font-size: 1.25em;
    color: rgb(73, 73, 73);
    font-family: "AR BERKLEY";
 }
 #gracias{
     width: 30vw;
     color: #4e4c4c;
     background-color: rgba(255,255,255,0.5);
     height: 40vh;
     border-radius: 10px;
     padding:2%;
     font-size:1.5em;
     text-align: center;
     box-shadow: 5px 2px 5px #4e4c4c ;
     
 }

 #gracias span{
     display: block;
     font-size:1.75em;
     margin-bottom: 1.5%;
     color: #508135;
     font-weight: 500;
 }
 #gracias_contenedor{
    display: flex;
    justify-content: center;
    align-items:center;
    width:100vw;
    height: 100vh;
    background-image: url(../imagenes/fondo_formulario.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    
    
 }
 #hamburguesa{
     font-size:1.5em;
     display: none;
 }
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
   
    
    background: #F0F3F0;
background: -webkit-linear-gradient(right, #F0F3F0, #FFFFFF);
background: -moz-linear-gradient(right, #F0F3F0, #FFFFFF);
background: linear-gradient(to left, #F0F3F0, #FFFFFF);




}

header> h1{ 
    /* color:transparent; */
    background-image: url(../imagenes/logo_rana.png) ;
    width:234px;
    height: 104px;
    
}
header>h1>a{
    color:transparent;
    display: block;
    height: 100%;
}


header nav ul {
    display: flex;

}
header nav ul li {
    margin: 0 1rem;
    list-style: none;
    
}
header nav ul li a {
  text-decoration:none;
  font-size:1.5rem;
  color:black;
    
}

#inicio{
    
    font-size:1em;
    color: #508135;
    text-decoration: none;
}
#inicio:hover{
    
    text-decoration: underline;
    font-weight: 600;
   
}
#inscripcion{
    width: 30%;
    
}
#inscripcion p{
    font-size:1.5em;
    border-bottom: 3px solid #999999;
}
#inscripcion p>span{
    font-weight: 900;
    display: block;
}

input, textarea{ 
    border-radius:10px;
}
img[src="imagenes/twitter.png"], img[src="imagenes/facebook.png"], img[src="imagenes/instagram2.png"]{
    width: 10%;
}
#justicia{
    background-image: url(../imagenes/justicia.jpg);
    width:200px;
    height: 299px;
    margin:auto;
    display: flex;
    justify-content: center;
}
#legales{
    padding-bottom: 3%;
}
#legales_info{
   
    display: flex;
    justify-content: space-around;
}
#legales h1{
    display: block;
    margin:auto;
    text-align: center;
    background-color: #508135;
    width:20%;
    color:white;
    font-size:2em;
    padding: 1%;
    margin-top:2%;
    
}
#maps{
    width: 100%;
    height: 500px;
    display: flex;
}

.padding{ 
    
    padding: 1% 1% 2% 1%;
    
   
}
#section1{
    min-width: calc(100vw- 4%);
    font-size: 2.5em;
}


#section1 picture>img{
    width: 100%;
   
}



#servicios article{
    width: 80vw;
    
    box-shadow:0px 4px 11px 0px     #999999;
    margin: 3% auto 3% auto;
    padding: 2%;
    max-height: 100%;
    display: flex;
    
}
#servicios article picture {
    width: 50%;
    
}
#servicios article picture img{
    width: 100%;
}

#servicios article>div{
    padding: 1%;
    text-align: center;
    width: 50%;
    min-width: 50%;
}

#servicios article>div>h1{
    color:#508135;
    font-size:2.5em;

}
#servicios article>div>p{
    
    font-size:2em;
    margin-top:3%;
   
}

#social-media>span>a{
    
    color:white;
    font-size: 3em;
    
}

#quienes_somos{
    margin-top: 3% ;
    margin-bottom:3%;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#quienes_somos h1{
    text-align:center;
    background-color: rgba(140,201,48,1);
    color: white;
    width:30vw;
    margin:auto;
    
}
#quienes_somos picture{
   z-index:1; 
   width: 60vw;
   
}
#quienes_somos picture>img{
    width: 100%;
   
    
 }


#quienes_somos p{
    
    margin-top:-3%;
    column-count:2;
    column-gap:3%;
    column-rule: 5px solid  rgb(228, 224, 224);
    border:1px solid rgb(228, 224, 224);
    padding: 6% 3% 3% 3%;
    text-align: justify;
}

@media screen and (max-width:1091px){
    
    #servicios {
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
    }

    #servicios article{
        flex-direction: column;
        width: 45vw;
        
        

    }
    #servicios article>div, #servicios article>picture{
        width: 100%;
    }

    #servicios article:first-child>picture, #servicios article:nth-child(3)>picture{
        order:0;
    }
    #servicios article:first-child>div, #servicios article:nth-child(3)>div{
        order:1;
    }
}

@media screen and (max-width:825px){
    aside{
        flex-direction: column;
        flex-wrap: nowrap;

    }
    #formulario {
        width: 100%;
        order:1
    }

    #formulario_foto{
        width:100%;
        order:0;
        
    }
    
}

@media screen and (max-width:774px){
    #servicios {
        display: flex;
        flex-direction: column;
        
    }

    #servicios article{
        width:90vw;
    }
    #legales_info{
        flex-direction: column;
        align-items:center;
    }
    #inscripcion{
        width:60%;
    }
    #aclaracion{
        margin-top:3%;
        width:60%;
    }

}

@media screen and (max-width:600px){
    #aclaracion{
        width: 90%;
    }
    footer>address{
        text-align: center;
    }


    header h1{
        background-image: url(../imagenes/logo_rana_reducido.png) ;
        width:230px;
        height: 67px;
    }
    
    

    #justicia{
        display: none;
    }
    #legales h1{
        margin-bottom: 1%;
        
    }
    #quienes_somos h1, #legales h1{
        width:90vw;
    }
    #quienes_somos> p{
        column-count: 1;
        border:none;
    }

    #quienes_somos picture{
       display: none;
        
   

    
    }

    footer{
       
        flex-direction: column;
        justify-content: center;
    }

   
    /* Menú hamburguesa*/
    #hamburguesa{
        display: block;
        order:1;
       
    }
    #hamburguesa li{
        line-height: 80px;
        
    }
    
    #botones{
        background-color:rgb(140,201,48);
        width: 100%;
        height: 100vh;
    }
    
    #botones li>a{
        color:white;
        display: block;
        text-align: center;
        font-size:2em;
        padding: 1em 0; 
        

    }
    header{
        display: flex;
        justify-content: space-between;
        height: 80px;
    }
    header> h1{
        
        height: 100%;
        margin:auto;
        
    }
    header>h1>a{
        display: block;
    }

    header> nav{
       
        position: absolute;  
        top: 0;
        left:0;
        width:100%;
         
        
    }
  
    header>nav>ul{
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }

    nav:target #botones{ display: block; }
     #botones{ display: none; } 
    
     #hamburguesa li:last-child { display: none; }
    nav:target #hamburguesa li:first-child{ display: none; }
    nav:target #hamburguesa li:last-child{ display: block; }

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.