Jump to content

I don't understand how I did this (lol)

matiasnegro

By matiasnegro
in CSS

 Share

Recommended Posts

matiasnegro Newbie

matiasnegro

Posted
Posted

I'm doing this NFT Preview Card Front End Mentor Challenge and I had to horizontally and vertically center the main container of the page. I ended up copy-pasting code from someone else who uploaded his solution to github and I kept coding. In his code, he used flex and assigned 100vh height to the whle body of the page. I have now finished the challenge but I've just realized I don't understand how that part of the code works. The code I'm refering to is this:

 body
    {background-color: hsl(217, 54%, 11%);
    font-size: 18px;
    color: hsl(215, 51%, 70%);
    font-family: Outfit, sans-serif;
    display: flex;
    height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;}
 
    .container
    {background-color: hsl(216, 50%, 16%);
    border-radius: 15px;
    height: auto;
    width: 420px;
    padding: 30px;}

If I change the units of "height" (from vh to px, for example) of the body, everything stops being vertically centered all of a sudden.

I've also tried deleting the "flex" and "height" properties from the body and assigning the same properties and values to the container inside of the body, but everything breaks when I do that.

body
    {background-color: hsl(217, 54%, 11%);
    font-size: 18px;
    color: hsl(215, 51%, 70%);
    font-family: Outfit, sans-serif;}
 
    .container
    {background-color: hsl(216, 50%, 16%);
    border-radius: 15px;
    display: flex;
    height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;}

And I don't understand why or how these things happen. Can someone explain it to me? I'm open to using an alternative too if it works.

The entire code is here: 

<!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=Outfit:wght@300;400;600&family=Poppins&display=swap" rel="stylesheet">

  <title>Frontend Mentor | NFT preview card component</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>

    *
    {margin: 0;
    padding: 0;
    box-sizing: border-box;}
    
    body
    {background-color: hsl(217, 54%, 11%);
    font-size: 18px;
    color: hsl(215, 51%, 70%);
    font-family: Outfit, sans-serif;
    display: flex;
    height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;}

    .container
    {background-color: hsl(216, 50%, 16%);
    border-radius: 15px;
    height: auto;
    width: 420px;
    padding: 30px;}

    .mainimage--center
    {display: grid;
    place-items: center;
    height: 50px;}

    .mainimage img 
    {width: 100%;
    border-radius: 10px;}

    h2
    {color: white;
    padding-top: 15px;
    padding-bottom: 3px;
    font-weight: 300;}
    
    .collection
    {padding-bottom: 15px;
    padding-top: 15px;
    font-weight: 400;}

    main ul
    {display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0px;
    border-bottom: 1px solid;
    list-style-type: none;
    padding-bottom: 20px;
    padding-top: 0px;
    font-weight: 600;}   
    
    main ul span
    {color: hsl(178, 100%, 50%);}

    .creationby
    {width: 100%;
    display: flex;
    padding-top: 15px;}

    .creationby p
    {padding-left: 15px;
    padding-top: 9px;
    font-weight: 0;}

    .creationby img
    {width: 40px;
    height: 40px;
    border: 2px solid hsl(0, 0%, 100%);
    border-radius: 30px;
    vertical-align: baseline;}

    .creationby span
    {color: white;}

    .attribution 
    {font-size: 11px; text-align: center;
    position: fixed;
    bottom: 5px;}

    .attribution a { color: hsl(228, 45%, 44%);}

  </style>
</head>
<body>

<div class="container">

<div class="mainimage"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-equilibrium.jpg?raw=true" alt="nft"></div>
  <h2>Equilibrium #3429</h2>

  <p class="collection">Our Equilibrium collection promotes balance and calm.</p>

<main>

<ul>
        <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-ethereum.svg" alt="" /><span>0.041 ETH</span></li>
        <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-clock.svg" alt="" /> 3 days left</li>
</ul>
    
</main>

<div class="creationby";>
  
<img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-avatar.png?raw=true" alt="avatar">

<p>Creation of <span>Jules Wyvern</span></p>

</div>

</body>

</div>

<div class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
  Coded by <a href="#">Matías Edgardo Negro</a>.
</div>

</html>

 

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

100vh Viewport Height is the height of your device screen.

So it adjusts and remains to current screen height, not like 100% which can be higher or lower than screen height depending its parent container height.

When using 100px it remains vertically centered but! To 100px height from top of body container, instead of the body container full height of device screen. With overflow: hidden; the div container content probably would be clipped.

align-items: deals with vertical alignment of display: flex; container.

justify-content: deals horizontal alignment of display: flex; container.

 

 

Link to comment
Share on other sites
matiasnegro Newbie

matiasnegro

Posted
  • Author
Posted

So I finally figured it out.

If the html element is not set to "height:100%", then you NEED to have the div in 100vh somehow. BUT if you set the html element height to 100%, then the body element height to 100% and apply flex in the body element, then you can set the height of the div to 100% without problem.

Here's the code, maybe it is more clear like this. Thanks dsonesuk for answering: 

<!DOCTYPE html>
<html>

    <head>

<title>Estructura HTML Prototípica</title>
<meta charset="UTF-8">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="description" content="Descripción del contenido de la página">
<meta name="author" content="Nombre del dueño de la página">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">


    <style>
    *
    {margin: 0;
    padding: 0;
    box-sizing: border-box;}

       
    html
    {height: 100%;}
    
    
    body
    {background-color: red;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;}
    
    
    .primero
    {background-color: black;
    color: white;
    display: flex;
    height: 100px;
    width: 100px;
    align-items: center;
    justify-content: center;}

    .segundo
    {background-color: white;
    color: orange;
    text-align: center;
    height: 20px;}

    </style>
    
    </head>

    <body>
    <div class="primero">
       
    <div class="segundo">
        <p>Hola</p>
    </div>

    </div>
    </body>
</html>

And here it is, applied to the code I posted first: 

<!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=Outfit:wght@300;400;600&family=Poppins&display=swap" rel="stylesheet">

  <title>Frontend Mentor | NFT preview card component</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>

    *
    {margin: 0;
    padding: 0;
    box-sizing: border-box;}

    html
    {height: 100%;}
    
    body
    {background-color: hsl(217, 54%, 11%);
    font-size: 18px;
    color: hsl(215, 51%, 70%);
    font-family: Outfit, sans-serif;
    align-items: center;
    height: 100%;}

    .containergeneral
    {display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;}

    .container
    {background-color: hsl(216, 50%, 16%);
    border-radius: 15px;
    height: auto;
    width: 420px;
    padding: 30px;}

    .mainimage--center
    {display: grid;
    place-items: center;
    height: 50px;}

    .mainimage img 
    {width: 100%;
    border-radius: 10px;}

    h2
    {color: white;
    padding-top: 15px;
    padding-bottom: 3px;
    font-weight: 300;}
    
    .collection
    {padding-bottom: 15px;
    padding-top: 15px;
    font-weight: 400;}

    main ul
    {display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0px;
    border-bottom: 1px solid;
    list-style-type: none;
    padding-bottom: 20px;
    padding-top: 0px;
    font-weight: 600;}   
    
    main ul span
    {color: hsl(178, 100%, 50%);}

    .creationby
    {width: 100%;
    display: flex;
    padding-top: 15px;}

    .creationby p
    {padding-left: 15px;
    padding-top: 9px;
    font-weight: 0;}

    .creationby img
    {width: 40px;
    height: 40px;
    border: 2px solid hsl(0, 0%, 100%);
    border-radius: 30px;
    vertical-align: baseline;}

    .creationby span
    {color: white;}

    .attribution 
    {font-size: 11px; 
    position: fixed;
    bottom: 5px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;}

    .attribution a { color: hsl(228, 45%, 44%);}

  </style>
</head>
<body>

<div class="containergeneral";>
<div class="container">

<div class="mainimage"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-equilibrium.jpg?raw=true" alt="nft"></div>
  <h2>Equilibrium #3429</h2>

  <p class="collection">Our Equilibrium collection promotes balance and calm.</p>

<main>

<ul>
        <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-ethereum.svg" alt="" /><span>0.041 ETH</span></li>
        <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-clock.svg" alt="" /> 3 days left</li>
</ul>
    
</main>

<div class="creationby";>
  
<img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-avatar.png?raw=true" alt="avatar">

<p>Creation of <span>Jules Wyvern</span></p>

</div>

</div>

</body>

</div>

<div class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
  Coded by <a href="#">Matías Edgardo Negro</a>.
</div>

</html>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...