es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Desnude antes de dirigirse al lado izquierdo no está funcionando en la vista móvil exactamente.

Desnude antes de dirigirse al lado izquierdo no está funcionando en la vista móvil exactamente.

19 Jul, 2023 Programación

Tengo un encabezado con una línea de separación en el lado izquierdo; funciona bien en el escritorio pero no se ve bien en la vista móvil, en la vista móvil la línea de separación anula el encabezado, ¿cómo puedo hacer que esto funcione en las vistas sensibles (móviles)?

enter image description here

.title {
    font-size: 35px;
    color: #000000;
    font-family: "Open Sans"!important;
    margin-bottom: 10px;
    clear: both;
    margin-left:50px;
}
.strip {
    background-color: #ffc20e;
    width: 87%;
    position: absolute;
    height: 31px;
    border-radius: initial!important;
    left: -1010px;
}
@media only screen and (max-width: 550px)
.strip {
    left: -356px!important;
}


<h4 class="title"><span class="strip"></span>Heading</h4>

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que la línea de la franja izquierda funcione en las vistas responsivas (móviles), necesitas hacer algunos cambios en el código CSS.

    En primer lugar, elimina la propiedad position: absolute; de la clase .strip, ya que hará que la línea de la franja se superponga al encabezado en la vista móvil.

    En segundo lugar, cambia el ancho de la clase .strip a un valor porcentual que funcione para dispositivos móviles. Puedes probar ajustar este valor para ver qué funciona mejor para tu diseño.

    Por último, cambia la propiedad left en la clase .strip para dispositivos móviles utilizando consultas de medios. Esto moverá la línea de la franja a donde corresponde en la vista móvil.

    Aquí está el código CSS actualizado:

    .title {
    font-size: 35px;
    color: #000000;
    font-family: "Open Sans"!important;
    margin-bottom: 10px;
    clear: both;
    margin-left: 50px;
}
.strip {
    background-color: #ffc20e;
    width: 10%;
    height: 31px;
    border-radius: initial!important;
}
@media only screen and (min-width: 550px){
    .strip {
        width: 87%;
        left: -1010px;
        position: absolute;
    }
}
@media only screen and (max-width: 550px){
    .strip {
        width: 20%;
        left: -38px;
        position: relative;
        margin-right: 10px;
        margin-top: -15px;
    }
}

    Y aquí está el código HTML actualizado:

    <h4 class="title"><span class="strip"></span>Encabezado</h4>

    Ten en cuenta que es posible que necesites ajustar los valores en la consulta de medios para adaptarlos a tu diseño y tamaños de dispositivos específicos.

Comments are closed.