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>
No description
5 Replies
Anonymous DEV
Anonymous DEV•14mo 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~
~MARSMAN~•14mo ago
it is centered for me, try to hard refresh your browser. Ctrl + F5
Anonymous DEV
Anonymous DEV•14mo ago
i tried like 10 times it started working after that 😭 i hate when u have problems which is not even ur fault
~MARSMAN~
~MARSMAN~•14mo ago
yeah it's annoying PepeBruh
Want results from more Discord servers?
Add your server