Responsive NFT Preview Card

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾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!

  Marked as helpful

  0

  ---

  

  Alba•70

  @albscrPosted about 2 years ago

  @correlucas Thank you very much Lucas! I really appreciate your recommendations. They are helping me to grow. What a world this is of programming eh haha I hope that in my next designs I can improve a lot more.

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @albscr For sure you'll do Alba! I did 20 challenges and I can say you that! Every challenge a new thing to add for your next projects. Keep it up =)

  0
• 

  Laharl•1,000

  @UrbanskiDevPosted about 2 years ago

  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 !

  Marked as helpful

  0

  ---

  

  Alba•70

  @albscrPosted about 2 years ago

  @UrbanskiDev Thank you very much! I had not noticed these details. I will improve it and I hope it will be reflected in my next challenge

  1
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  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.

  0