Aakash Vermaβ’ 6,690
@skyv26
Posted
Hi! Ben, I checked your work and I have some suggestions for you.
- you are using margin-left and margin-rigth in order to make gap between the text and the icons. I have a very good solution which is only one line solution for each div for card-value and card-time.
just add gap: 0.4rem;
in your div like below:
.card__time {
color: #8bacda;
display: flex;
align-items: center;
gap: 0.4rem;
/* margin-right: 1rem; */
}
.card__value {
color: #00fff7;
font-size: 1.3;
display: flex;
align-items: center;
gap: 0.4rem;
}
remove margin from below css properties
.eth, .clock {
/* margin-right: 1rem; */
}
even it is better approach and easy to handle and even make your content alignment and spacing really good.
- below 400px your card is touching both right and left edges of mobile viewport so add some margin or make card width little bit less.
I hope it will help to make more better UI.
Good Luck
Marked as helpful
0