Search code examples
htmlcssmedia-queriescss-gridcentering

Cannot center the element using grid in css

I just made a card component using html and css, but cannot center image when using grid. The page is fine in bigger screens. For bigger screens I used flex box to align the information and the image and for the mobile view I used the grid layout to align things vertically and to make it on center I used justify-content: center property and when I switched to mobile view the info section was centered but not the image. I also used media queries for responsive design.

Here is my css code:

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

html {
  height: 100%;
  font-size: 15px;
}

.attribution {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 1rem;
 color: white;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: hsl(233, 47%, 7%);
    
}

.card
{
  
    font-size: 1rem;
    background-color: hsl(244, 38%, 16%);
    display: flex;
    width: 70vw;
    height: 50vh;
    box-shadow: 0 10px 20px -6px #000;
}

a{
    text-decoration: none;
}

.card1, .card2
{
    flex: 1;
}

.card2{
    height: 50vh;
    background-image: url(../images/image-header-desktop.jpg);
    background-size: 100% 100%;

}
.card1a, .card2a, .card3a
{
 
    font-size: 1rem;
}

.card1{
    display: grid;
    color: hsl(0, 0%, 100%);
    padding-left: 4em;
    padding-right: 5em;
    padding-top: 3em;
    padding-bottom: 3em;
    grid-template-rows: 10em 9em ;
}

.insights
{
    color: hsl(277, 64%, 61%);
}

.card1a{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 3rem;
}

.card2a
{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    width: 60%;
    color: hsla(0, 0%, 100%, 0.75);
}

.card3a
{
    display: flex;
    justify-content: space-between;
    width: 55%;
    font-family: 'Lexend Deca', sans-serif; 
}

.info
{
    color: hsla(0, 0%, 100%, 0.6);
}

@media (max-width: 700px)
{
    .card1a, .card2a, .card3a
    {
        border: 2px solid green;
        padding-bottom: 1em;
    }
    .card
    {
        display: grid;
        justify-content: center;
        
        width: 70vw;
        height: 90vh;
        border: 2px solid red;
    }

   .card1a
   {
       font-size: 2rem;
       justify-content: center;
       width: 60vw;
       text-align: center;
   }

   .container
   {
       width: 100vw;
       height: 100vh;
   }
   .card2a{
       font-size: 0.9rem;
       width: 44vw;
       text-align: center;
   }
   .card3a{
       width: 100%;
       display: grid;
       justify-content: center;
   }
   .card2{
    width: 70vw;    
    height: 35vh;
    background-image: url(../images/image-header-mobile.jpg);
    background-size: 100% 100%;
    grid-row: 1;
    border: 2px solid green;
    
}
.info
{
   font-size: 0.8rem;
}

.card1
{
    grid-template-rows: auto ;
    place-items: center;
}

.inf
{
    padding-bottom: 0.7em;
}



}

and here is my 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">
  
  <title>Frontend Mentor | Stats preview card component</title>
  <link rel="stylesheet" type="text/css" href="./style/styles.css">

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">




  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>

  <div class="container">
    <div class="card">
      <div class="card1">

        <div class="card1a">
          Get <span class="insights">insights</span> that help your business grow.
        </div>
       
        <div class="card2a">
          Discover the benefits of data analytics and make better decisions regarding revenue, customer 
        experience, and overall efficiency.
        </div>
        
        <div class="card3a">
          <div class="inf">10k+ <br> <span class="info">companies</span></div>
          <div class="inf">314 <br> <span class="info">templates</span></div>
          <div class="inf">12M+ <br> <span class="info">queries</span></div>
         
        </div>
       
      </div>

      <div class="card2">
        
       
      </div>
    
    </div>
  </div>

 
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Abhijeet John Kujur</a>.
  </div>
</body>
</html>

Here is the output screenshot

Solution

  • Try to add justify-items: center; in media query

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

html {
  height: 100%;
  font-size: 15px;
}

.attribution {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 1rem;
 color: white;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: hsl(233, 47%, 7%);
    
}

.card
{
  
    font-size: 1rem;
    background-color: hsl(244, 38%, 16%);
    display: flex;
    width: 70vw;
    height: 50vh;
    box-shadow: 0 10px 20px -6px #000;
}

a{
    text-decoration: none;
}

.card1, .card2
{
    flex: 1;
}

.card2{
    height: 50vh;
    background-image: url(../images/image-header-desktop.jpg);
    background-size: 100% 100%;

}
.card1a, .card2a, .card3a
{
 
    font-size: 1rem;
}

.card1{
    display: grid;
    color: hsl(0, 0%, 100%);
    padding-left: 4em;
    padding-right: 5em;
    padding-top: 3em;
    padding-bottom: 3em;
    grid-template-rows: 10em 9em ;
}

.insights
{
    color: hsl(277, 64%, 61%);
}

.card1a{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 3rem;
}

.card2a
{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    width: 60%;
    color: hsla(0, 0%, 100%, 0.75);
}

.card3a
{
    display: flex;
    justify-content: space-between;
    width: 55%;
    font-family: 'Lexend Deca', sans-serif; 
}

.info
{
    color: hsla(0, 0%, 100%, 0.6);
}

@media (max-width: 700px)
{
    .card1a, .card2a, .card3a
    {
        border: 2px solid green;
        padding-bottom: 1em;
    }
    .card
    {
        display: grid;
        justify-items: center;
        justify-content: center;
        width: 70vw;
        height: 90vh;
        border: 2px solid red;
    }

   .card1a
   {
       font-size: 2rem;
       justify-content: center;
       width: 60vw;
       text-align: center;
   }

   .container
   {
       width: 100vw;
       height: 100vh;
   }
   .card2a{
       font-size: 0.9rem;
       width: 44vw;
       text-align: center;
   }
   .card3a{
       width: 100%;
       display: grid;
       justify-content: center;
   }
   .card2{
    width: 70vw;    
    height: 35vh;
    background-image: url(../images/image-header-mobile.jpg);
    background-size: 100% 100%;
    grid-row: 1;
    border: 2px solid green;
    
}
.info
{
   font-size: 0.8rem;
}

.card1
{
    grid-template-rows: auto ;
    justify-items: center;
}

.inf
{
    padding-bottom: 0.7em;
}



}
    <!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">
  
  <title>Frontend Mentor | Stats preview card component</title>
  <link rel="stylesheet" type="text/css" href="./style/styles.css">

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">




  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>

  <div class="container">
    <div class="card">
      <div class="card1">

        <div class="card1a">
          Get <span class="insights">insights</span> that help your business grow.
        </div>
       
        <div class="card2a">
          Discover the benefits of data analytics and make better decisions regarding revenue, customer 
        experience, and overall efficiency.
        </div>
        
        <div class="card3a">
          <div class="inf">10k+ <br> <span class="info">companies</span></div>
          <div class="inf">314 <br> <span class="info">templates</span></div>
          <div class="inf">12M+ <br> <span class="info">queries</span></div>
         
        </div>
       
      </div>

      <div class="card2">
        
       
      </div>
    
    </div>
  </div>

 
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Abhijeet John Kujur</a>.
  </div>
</body>
</html>