Desnude antes de dirigirse al lado izquierdo no está funcionando en la vista móvil exactamente.
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)?
.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>
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:
Y aquí está el código HTML actualizado:
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.