dimanche 26 janvier 2020

lossing text with meta viewport

i'm making my first blog and i'm trying to make it responsive, i use the meta viewport but when i testit whit toogle in little size of windows, the text i wrote goes out. here is a example code in css and html with the same problem i have:

.hero{
    background-color: firebrick;
    display: flex;
    justify-content: center;
}

.container{
    display: flex;
    justify-content: center;
    width: 1000px;
    padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="C:/Users/MSI/Documents/programacion/html_y_css/estilos_test.css">
    <meta name="viewport" content="width=device-width, initial-scape=1.0">

</head>
<body>
    <section class="hero">
        <div class="container">
            <article>
                <h1> ¿quien soy?</h1>
                    <p> araragi koyomi: estudiante de bioingeniería . amante de la naturaleza; me gustan
                        las plantas y los animales en general, amo las matemáticas, me siento cómodo en lugares silenciosos y disfruto de ver anime,
                        salir con amigos, el queso, el vino y el chocolate, me encanta la programación y planeo enfocar mi carrera en programación 
                        tanto como pueda.
            </article>
            <figure>
                <img class="image-item" src="C:\Users\MSI\Documents\programacion\html_y_css\imagenes\viajes\yo_laguna.jpg" alt="no se encuentra una imagen" width="400px">
                <small> Figura: viaje a la laguna del otún</small>
            </figure>
        </div>

    </section>
</body>
</html>
i try to solveit with the property max-width but the content shown in the window also include the body, someone know how to solve this problem? thank you, stackoverflow does not allow me load images. thank you.


Aucun commentaire:

Enregistrer un commentaire