having problem centering in mobile version

i dont know why its not center in mobile version can someone help me out

<!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 rel="stylesheet" href="./css/style.css">
  
  <title>Frontend Mentor | Advice generator app</title>
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="advice-id">ADVICE # 117</div>
      <div class="advice">"It is easy to sit up and take notice,what's difficult is getting up and taking action."</div>
      <div class="line">
        <img src="./images/pattern-divider-desktop.svg" alt="">
      </div>
      <div class="logo">
        <img src="./images/icon-dice.svg" alt="">
      </div>
    </div>
  </div>
</body>
</html>

<!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 rel="stylesheet" href="./css/style.css">
  
  <title>Frontend Mentor | Advice generator app</title>
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="advice-id">ADVICE # 117</div>
      <div class="advice">"It is easy to sit up and take notice,what's difficult is getting up and taking action."</div>
      <div class="line">
        <img src="./images/pattern-divider-desktop.svg" alt="">
      </div>
      <div class="logo">
        <img src="./images/icon-dice.svg" alt="">
      </div>
    </div>
  </div>
</body>
</html>

5 Replies

Anonymous DEVOP•16mo ago

  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Space+Grotesk:wght@500&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    min-height: 100vh;
    width: 100vw;
    background-color:rgb(32, 38, 50);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
}
.card{
    min-height: 20rem;
    max-width: 35rem;
    background-color: rgb(49, 58, 73);
    border-radius: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    padding: 2.2rem;
    text-align: center;
    box-shadow:10px 20px 90px hsl(0, 0%, 8.2%);
    position: relative;
}
.advice-id{
    color: hsl(150, 100%, 66%);
    font-size: 1rem;
}
.advice{
    color:hsl(193, 38%, 86%)
}
.line img{
    width: 28rem;
}
.logo{
    padding: 1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(150, 100%, 66%);
    position: absolute;
    bottom: -1.5rem;
}
.logo:hover{
    background-color: hsl(150, 100%, 57%);
    box-shadow: 1px 1px 60px hsl(150, 100%, 55%);
}

  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Space+Grotesk:wght@500&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    min-height: 100vh;
    width: 100vw;
    background-color:rgb(32, 38, 50);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
}
.card{
    min-height: 20rem;
    max-width: 35rem;
    background-color: rgb(49, 58, 73);
    border-radius: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    padding: 2.2rem;
    text-align: center;
    box-shadow:10px 20px 90px hsl(0, 0%, 8.2%);
    position: relative;
}
.advice-id{
    color: hsl(150, 100%, 66%);
    font-size: 1rem;
}
.advice{
    color:hsl(193, 38%, 86%)
}
.line img{
    width: 28rem;
}
.logo{
    padding: 1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(150, 100%, 66%);
    position: absolute;
    bottom: -1.5rem;
}
.logo:hover{
    background-color: hsl(150, 100%, 57%);
    box-shadow: 1px 1px 60px hsl(150, 100%, 55%);
}

~MARSMAN~•16mo ago

it is centered for me, try to hard refresh your browser. Ctrl + F5

~MARSMAN~•16mo ago

https://codepen.io/ThatMartianDev/pen/NWepMrP

MarsMan

CodePen

center issue

...

Anonymous DEVOP•16mo ago

i tried like 10 times it started working after that 😭 i hate when u have problems which is not even ur fault

~MARSMAN~•16mo ago

yeah it's annoying PepeBruh

Gaming

Programming

having problem centering in mobile version