Responsive NFT Card Component Using Flexbox

Hi, I checked your code and you are using pseudo-elements ::before to display icons so if you want to align them you must set position: relative to parent element and position: absolute to ::before element. So for example it should look like this:

.card__price { position: relative; margin-left: 20px; }

.card__price::before { position: absolute; left: -20px; top: 1px; }

.card__date { position: relative; }

.card__date::before { left: -25px; top: 2px; }

Hope it helps you.

Hi, I also used ":: before" and I solved the problem of the icons' alignment by making the sentences flex, which however I had inserted inside a p class (not span). So by changing the span to a p, you could remove the position properties and you can just give a class to both, so the alignment applies to both and then flex that class. Ex:

<div class="card__row"> <p class="card-icons" id="card__price">0.041 ETH</p> <p class="card-icons" id="card__date">3 days left</p> </div>

.card-icons { display: flex; }

#card__price::before { content: .....; margin-right: .....; }

#card__date::before { content: .....; margin-right: .....; }

I hope you find it helpful!

Hi, congrats on completing this project, your solution looks really good, However you'll need to center the container you can do this by: Giving the body a min-height of 100vh, a width of 100vw then you give it a display: grid; and then you place-items: center; to center the container.

I hope this solves your problem and you find it helpful.

Happy coding!

Hi polukarp, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

• To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

Example:

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

The rest is great!

I hope it helps... 👍