1

esoty tratando de ajustar estos titulos para que no se vean asi cuando los centro

Adjunto codigo:

@media (max-width: 480px ) {
    h1{
      
      font-family: Open Sans;
      font-size: 36px;
      font-weight: 800;
      line-height: 30px;
      letter-spacing: 0em;
      text-align: center;
      margin-left: 430px;
      color: white;  
    }
  
    h2{
     
    font-family: Open Sans;
    font-size: 15px;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0em;
    margin-left: 430px;
    color: white;
    }
  
}

los tiutlos se distorsonian cuando los centro no se porque pase eso

introducir la descripción de la imagen aquí

no tendria porque verse asi que tendria que cambiar en el css para que no se vea asi

introducir la descripción de la imagen aquí

5
  • Tu cuadrado ha de tener padding o margin. Podrías mostrarnos los estilos que estas aplicando al cuadrado?
    – EvilFearzZ
    Commented el 11 jul. 2022 a las 16:23
  • pues no estan dentro de un cuadroel margin que le di es para centrarlas y que se ajusten a una vista de 480px pero en vez de que se vean alineados se ven asi y esos son los estilos que tienen esos componentes
    – user289915
    Commented el 11 jul. 2022 a las 16:57
  • Quita el margin-left: 430px; de h1 y de h2 ya que no tiene sentido debido a que lo estás mandando a centrar. coloca tambien !important en text-align: center;
    – EvilFearzZ
    Commented el 11 jul. 2022 a las 17:04
  • lo hice pero no lo centro
    – user289915
    Commented el 11 jul. 2022 a las 17:07
  • los centro pero los mando a la izquierda
    – user289915
    Commented el 11 jul. 2022 a las 17:09

1 respuesta 1

0

Te dejo un ejemplo de como debes aplicarlo:

<style>
    @media (max-width: 480px) {
        h1{
            font-family: Open Sans;
            font-size: 36px;
            font-weight: 800;
            line-height: 30px;
            letter-spacing: 0em;
            text-align: center;
            color: red;  
        }
    
        h2{
            font-family: Open Sans;
            font-size: 15px;
            font-weight: 300;
            line-height: 30px;
            letter-spacing: 0em;
            text-align: center;
            color: purple;
        }
    }
</style>

<!DOCTYPE html>
<html lang="en">
<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>Tst</title>
</head>
<body>
    <h1>Prueba 1</h1>

    <h2>Prueba 2</h2>
</body>
</html>

Y así es como debe verse: (Centrado) introducir la descripción de la imagen aquí

2
  • 1
    listo ya quedo gracias
    – user289915
    Commented el 11 jul. 2022 a las 17:37
  • listo ya funciono gracias
    – user289915
    Commented el 11 jul. 2022 a las 18:31

Tu Respuesta

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