Responsive NFT Preview Card

👾Hello again Alba, congratulations for your new solution!

🎉 Nice solution and nice code! I can see that you paid a lot of attention to your code/design. If you don’t mind I’ve some tips for you:

1.You can create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

@media (max-width: 350px) {
.price-container {
    display: flex;
    width: 100%;
    margin: 3rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
}

2.Something that can be a time saver for you is to use a CSS RESET to remove all default settings for margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

✌️ I hope this helps you and happy coding!

Hello Alba !

Congratulation for finishing this project

1. I would recommend you to solve the little HTML issue you have on your report section !

2. The responsive part has some problem :

• If you go on your browser dev tool (F12), and you try your mobile responsiveness, you can see all your element are broken, while your image is very small.

You can prevent it by adding a min-width, which allow you to stop your elements going further down in size if your screen become too small !

In your media query :

card_container {
  width: 60%;
  height: 30%;
  background-color: var(--color-neutral-2);
  border-radius: 10px;
  min-width: 300px;
}

I see you also used CSS variables which is good design to follow !

Good job on it, keep going and I hope my comment is helpful to you !

Hi,

Congrats on completing the challenge just check seems like you're link the wrong the font check the font-family on the body as serif not sure which font is used on this challenge but it's definitely a sans-serif on on the body you're setting a serif font not sure if that what you intended just thought I'd mentioned it .

You can actually just set the of the card to max-width: 375px because currently being overwritten and gets really narrow on mobile. Other thing is to check the issues in the report above for example you could swap out the section for a main tag and the .card_container div for a section with that class.

There is also not an H1 tag being used. You should work your way down from the h1 > h6. The h1 is really import for multiple reasons. The following is important you can't wrap a inline element around a block level element so the a tag around the h2 is invalid you can add the a tag inside the h2 tag:

<h2 class="title">
             <a href="#">Equilibrium #3429</a> 
 </h2>

I know it's a lot but hope these are helpful, let me know if you have any other questions.