3 Column Preview Card Component

Hi TRG,

• you could style the body tag like:

body{
display: grid;
place-items: center;
width: 100vw; height:100vh;

• You can use that that to center your elements instead of giving position: absolute to the content so you can get rid of that transform that's taking the content of the page

• You can add a, maybe width: 80% to the media query of your .card class so it'll fill the page

-I also think it's a good Idea to use grid( display: grid for these columns

• You can write;

.card{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 376px) {
.card{
grid-template-columns: 1fr;
}
}

• The above will make the colums fill all the space available to them

Hope those were helpful 🙂