My page does not fully populate the mobile window. Why?

Asked

Viewed 46 times

0

Even with the width 100% in the structure tags when I do the mobile test the page does not fully fill in: ![inserir a descrição da imagem aqui

Why does this happen?

* {margin: 0 auto; padding: 0 auto;}

/*
    Por a largura se repetir 
    utilizei a classe default-structure-formatting 
    para a definir e evitar repetições. 
    Os atributos específicos de altura e cor estão em cada respectiva tag.
*/

.default-structure-formatting
{
    width: 100%;    
}

header 
{
    background-color: #000;
    height: 120px;
}

nav 
{
    background-color: #09f;
    height: 30px;
}

section 
{
    background-color: #891e2b;
    height: 600px;
}

footer 
{
    background-color: #000;
    height: 30px;
}


/* Formatação de Texto*/
.default-text-formatting {text-align: center; color: white; }

.default-content-formatting {width: 994px;color: white; padding: 100px auto;}

header h1 {padding: 40px 0;}
nav h3 {padding: 5px 0;}
article p {padding: 220px 0; text-align: justify;}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="_css/style.css">
    <title>Atividade II</title>
</head>

<body>
        <header class="default-structure-formatting "> <h1 class="default-text-formatting">LOGO</h1></header>    
        
        <nav class="default-structure-formatting "> 
            <h3 class="default-text-formatting">HOME - PORTFOLIO - SOBRE - CONTATO</h3>
        </nav>
        
        <section class="default-structure-formatting ">
            <article > <p class="default-content-formatting"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quos temporibus debitis quam magni. Recusandae sequi incidunt, corporis asperiores dolores nulla, facilis perferendis, enim rerum esse labore vero tempore distinctio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro iure placeat, distinctio esse dicta a quidem? Magnam, itaque repellat, laudantium inventore est corrupti voluptate aut recusandae tempore autem dicta esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam illo officia voluptates veritatis sequi iure, vero eos, a repudiandae consectetur qui ea rem. Voluptatum aliquid quam beatae unde reiciendis ducimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi in ut hic commodi deserunt expedita voluptatem amet aperiam molestiae nobis laborum, odit optio distinctio impedit voluptas, dolor ratione, labore explicabo. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam expedita quidem mollitia itaque animi porro error quas sequi autem enim quae quia voluptate consequatur atque ratione suscipit, temporibus possimus vero. </p> </article>
        </section>
        
        <footer class="default-structure-formatting default-text-formatting"> Site © 2020 </footer>

</body>
</html>

html css

2 answers

2


As Thiago’s reply quoted, by specifying a width fixed in the div of 994px, if the screen is smaller than this, the div will continue with the same 994px width, creating this empty space on the right side. If you want this div to be at most 994px wide, change the width for max-width.

Now, there’s another error in your code in this padding: 100px auto;. The padding does not accept value auto, as you can see in this print when inspecting the element:

inserir a descrição da imagem aqui

In this passage you also did the same thing:

* {margin: 0 auto; padding: 0 auto;}

If you don’t want to padding on the sides, change the auto for 0 in:

.default-content-formatting {
   max-width: 994px;color: white; padding: 100px 0;
}

And here just leave just the 0:

* {margin: 0 auto; padding: 0;}

1

Hello @Uan this is taking place because of width: 994px; that you gave in class .default-content-formatting, in my solution I changed to max-width: 994px;, but you can create a @media for the mobile part

* {margin: 0 auto; padding: 0 auto;}

/*
    Por a largura se repetir 
    utilizei a classe default-structure-formatting 
    para a definir e evitar repetições. 
    Os atributos específicos de altura e cor estão em cada respectiva tag.
*/

.default-structure-formatting
{
    width: 100%;    
}

header 
{
    background-color: #000;
    height: 120px;
}

nav 
{
    background-color: #09f;
    height: 30px;
}

section 
{
    background-color: #891e2b;
    height: 600px;
}

footer 
{
    background-color: #000;
    height: 30px;
}


/* Formatação de Texto*/
.default-text-formatting {text-align: center; color: white; }

.default-content-formatting {max-width: 994px;color: white; padding: 100px auto;}

header h1 {padding: 40px 0;}
nav h3 {padding: 5px 0;}
article p {padding: 220px 0; text-align: justify;}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="_css/style.css">
    <title>Atividade II</title>
</head>

<body>
        <header class="default-structure-formatting "> <h1 class="default-text-formatting">LOGO</h1></header>    
        
        <nav class="default-structure-formatting "> 
            <h3 class="default-text-formatting">HOME - PORTFOLIO - SOBRE - CONTATO</h3>
        </nav>
        
        <section class="default-structure-formatting ">
            <article > <p class="default-content-formatting"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quos temporibus debitis quam magni. Recusandae sequi incidunt, corporis asperiores dolores nulla, facilis perferendis, enim rerum esse labore vero tempore distinctio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro iure placeat, distinctio esse dicta a quidem? Magnam, itaque repellat, laudantium inventore est corrupti voluptate aut recusandae tempore autem dicta esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam illo officia voluptates veritatis sequi iure, vero eos, a repudiandae consectetur qui ea rem. Voluptatum aliquid quam beatae unde reiciendis ducimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi in ut hic commodi deserunt expedita voluptatem amet aperiam molestiae nobis laborum, odit optio distinctio impedit voluptas, dolor ratione, labore explicabo. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam expedita quidem mollitia itaque animi porro error quas sequi autem enim quae quia voluptate consequatur atque ratione suscipit, temporibus possimus vero. </p> </article>
        </section>
        
        <footer class="default-structure-formatting default-text-formatting"> Site © 2020 </footer>

</body>
</html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.