Container div not filling in 100% body width

Trying to do a mobile first design but for small screens my container div (red) gets smaller width than my body div (blue). Can’t understand why. Also don’t know weather I’m using correct unities to set width and height.

Here you can see how it is

/* Mobile First */

body {
   height: 100vh;
   margin: 0;
   font-family: 'Josefin Sans', sans-serif;
   background-color: blue; /* remover */
}

.container {
   width: 100%;
   display: absolute;
   background-color: red; /* remover */
   background-repeat: repeat;
}

.logo {
   margin: 40px 10%;
}  

.wallpaper-left {
   min-height: 15.6em;
   max-height: 250px;
   background-image: url("./images/hero-mobile.jpg");
   background-size: cover;
   background-repeat: no-repeat;
}

and here is the html code

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     <!-- displays site properly based on user's device -->

    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap" rel="stylesheet">
    <link href="estilo.css" rel="stylesheet">

    <title>Frontend Mentor | Base Apparel coming soon page</title>

</head>

<body>

    <div class="container">
        <div class="left">
            <img class="logo" alt="logotipo" src="./images/logo.svg" width="158px" height="33px"></img>
            <div class="wallpaper-left"></div>
            <div class="texts">
                <p class="title-top">We're</p>
                <p class="title-bottom">coming</p>
                <p class="title-bottom">soon</p>
                <p class="description">
                    Hello fellow shoppers! We're currently building our new fashion store.
                    Add you email below to stay up-to-date with announcements and our launch deals.
                </p>
            </div>
            <div class="field-container">
                <div id="field" class="field">
                    <input class="email-field" type="email" placeholder="Email Address">
                    <a class="button highlight">></a>
                </div>
            </div>
            <div class="warning-container">
                <p id="warning" class="warning-hidden">Please provide a valid email</p>
            </div>
        </div>
        <div class="right">
            <div class="wallpaper-right"></div>
        </div>
    </div>

 </body>

</html>

Tried changing width values but I can’t get this responsive enough to smaller screens.

>Solution :

to solve your problem you added this line of code in your css code

@media screen and (max-width: 768px) {
   .logo {
      margin: 20px 5%;
   }
   
   .wallpaper-left {
      background-image: url("./images/hero-tablet.jpg");
   }
}


@media screen and (min-width: 769px) {
   .logo {
      margin: 60px 15%;
   }
   
   .wallpaper-left {
      background-image: url("./images/hero-desktop.jpg");
      min-height: 25em;
      max-height: 500px;
   }
}

I Hope it works well for you

Leave a Reply