I am trying create a responsive UI cards out of the card the design below for dynamic content. The current design shrinks the cards and their content instead of rearranging the cards as the screen gets smaller. This is the current cards designs.
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");
/***** CSS VARIABLES *****/
/***** CSS RESET *****/
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background: #15202b;
font-family: "Inter", sans-serif;
color: white;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
a {
text-decoration: none;
}
.card {
height: 250px;
width: 440px;
border: 1px solid #38444c;
padding: 1rem;
}
.card article {
margin-top: 0.5rem;
}
.card article p {
font-size: 1.15em;
}
.profile {
margin-top: 20px;
display: flex;
align-items: center;
}
.image {
width: 55px;
height: 55px;
border-radius: 50%;
}
.image img {
border-radius: 50%;
}
.username {
margin-left: 10px;
}
.username h4 {
font-size: 0.9rem;
}
.username span {
color: #566471;
font-size: 0.85rem;
}
.tweet-info {
display: flex;
align-items: center;
gap: 3px;
padding: 1rem 0;
border-bottom: 1px solid #38444c;
}
.tweet-info span {
font-size: 0.85rem;
color: #566471;
}
.heart {
cursor: pointer;
height: 50px;
width: 50px;
background-image: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png");
background-position: left;
background-repeat: no-repeat;
background-size: 3000%;
}
.is_animating {
animation: heart-burst 0.8s steps(28) 1;
}
@keyframes heart-burst {
from {
background-position: left;
}
to {
background-position: right;
}
}
M
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Twitter Like Animation