1

Buenas comunidad tengo un problema con mi sistema en movil, lo que pasa es que desde el primer momento mis 2 botones me cubren información, como podría hacer que esos 2 botones recién se muevan cuando me deslizo hacia bajo. Imagen referencial sin y con css: https://ibb.co/kyFt1f9

@media only screen and (max-width: 500px){
    .row2{
        z-index:50;
        margin-bottom: 50px;
        position: fixed;
        margin-top:0cm;
        top: 40;
        width: 100%;
        font-size: 20px;
    }
}
      <section class="content-header" >
      <div class="content">
    <div class="container-fluid">
      <div class="row row2 justify-content-around">
          <div class="col-sm-4" id="aprobado">
            <button type="button" id="btnconfir" class="btnapro btn btn-block btn-success btn-lg" onclick="Aceptar_Venta()">Aprobado</buttton>
          </div>
          <div class="col-sm-4" id="rechazado">
            <button type="button"  id="btnrech" class="btrecha btn btn-block btn-danger btn-lg" onclick="Rechazar_Venta()">Rechazado</button>
          </div>
      </div>
    </div>
  </section>

2
  • cambia el fixed por relative y adapta el css segun necesites Commented el 24 mar. 2022 a las 15:11
  • con relative se queda fijo
    – luiss
    Commented el 24 mar. 2022 a las 15:21

1 respuesta 1

0

Una solución más adecuado sería usar sticky en vez de fixed. La posición sticky actúa relativamente con el scroll, y queda fijo en su contenedor padre cuando se hace scroll.

Como no mostraste completo tu código y no se la estructura completa, dedusco que row quieres que se quede fijo. Bien, usando sticky resolvería esto. Queda fijo, pero solamente cuando se hace scroll. Es un buen diseño en CSS.

Para usar sticky, su contenedor padre deve ser position: relative, y por lo menos el doble de su altura en height (no importa si su contenedor padre cresca, o tenga muchos contenidos). No importa donde este ubicado row, siempre cuando row llega arriba de la pantalla, se queda alli visible. Para que éste row con posición sticky quede pegado arriba, debe tener top: 0. El resto es adaptar a tu estilo propio.

Yo opte por darle al mismo row la posición sticky. También agregué colores para diferenciar y una altura extra para visualizar.

Ya tu puedes adaptar y tener la idea a tu estilo.

Esto funciona solamente en un teléfono móvil

@media only screen and (max-width: 500px) { 
 
 .container-fluid {
  position: relative;
  height: 1000px;
  background: red
 }
 
 .row2{ 
  z-index:50;
  position: sticky; 
  top: 0; 
  width: 100%; 
  font-size: 20px;
  background-color: violet
 } 

}
<section class="content-header" > 
   
   <div class="content"> 

<div class="container-fluid">
 
 <div class="row row2 justify-content-around"> 
  
  <div class="col-sm-4" id="aprobado"> 
   <button type="button" id="btnconfir" class="btnapro btn btn-block btn-success btn-lg" onclick="Aceptar_Venta()">Aprobado</buttton> 
  </div> 
  
  <div class="col-sm-4" id="rechazado"> 
   <button type="button" id="btnrech" class="btrecha btn btn-block btn-danger btn-lg" onclick="Rechazar_Venta()">Rechazado</button> 
  </div> 
 
 </div> 
 
 <h1>Siguiente contenido del container </h1>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

 
</div> 

<h1>section</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</section>

6
  • Lo que me pasaste esta bien poniendoel fixed pero solo me muestra 1 boton: ibb.co/hfZjFfZ
    – luiss
    Commented el 24 mar. 2022 a las 16:34
  • segun entiendo en tu imagen, es que el header esta fijo, entonces todo el contenido que no es fijo, se queda debajo del header. Commented el 24 mar. 2022 a las 16:50
  • Se puede poner un padding-top: xx al contenedor del header y los demas. Este puede ser el body. Si el header es de height: 100px, entonces body {padding-top: 100px} Commented el 24 mar. 2022 a las 16:54
  • Hice lo q dice pero me afecta al siderbar y me queda un gran espacio en la parte de arriba imagen del resultado: ibb.co/XzSdFcS
    – luiss
    Commented el 24 mar. 2022 a las 18:00
  • Seria mejor si pudiera agregar todo tu codigo. Auque tu problema es detalle, se nota que te es dificil solucionar. Entonces, para no destruir tu pagina haciendo modificaciones sin entender, podrias agregar todo tu codigo? Commented el 24 mar. 2022 a las 18:25

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.