All comments

• 

  Mateus Moura Domingos•140

  @Theuz1nh0Submitted over 2 years ago

  • What did you think of my solution?
  • Do I need to improve anything?
  • I would really like your feedback.

  -I'm not using preprocessors yet, but I plan on doing so soon.

  

  NFT preview card component

  4

  60
  

  Juan Hamilton•470

  @hamilton-i7Posted over 2 years ago

  Hi there, Mateus!👋

  You did a very good job on this challenge👏 Great use of flexbox to center the card throughout different screen sizes👍

  There's just a couple of things I'd suggest:

  1. Try to use relative units such as rem or em whenever possible. For instance, you may also use it on padding and margin. That way, you ensure your website will scale properly if the root font size changes
  2. You could use a combination of max-width and width instead of just width to make sure the card is able to scale down better on the really small screen sizes, like below:

  main {
    max-width: 21.875rem;
    width: 100%;
  }
  

  Hope you find this helpful! Happy coding😎

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Paula•40

  @PaulaDudutaSubmitted over 2 years ago

  I've had a problem with vertical alignment of the product-card for the desktop resolution. I've chosen the method with margin top and bottom to center it (I know it's not the right way:)). But my question is, how can I vertically center the product-card? Do you have any other suggestions over the way I've structured/styled the project? I'm still a newbie trying my best:)

  Thank you for your answers!

  

  Product Preview Card

  3

  60
  

  Juan Hamilton•470

  @hamilton-i7Posted over 2 years ago

  Hello, Paula👋

  Congratulations on completing your first challenge👏 Your solutions responds really well on different screen sizes.

  Like others have said, you have two basic options when it comes to vertically align your product card component:

  • You can use position: absolute on the main tag and then center the card with transform: translate() like the example below:

  main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

  And for the containing div you would do the following:

  #container {
    position: relative;
    min-height: 100vh;
    width: 100%;
  }
  

  min-height is set to 100vh to make the container div occupy the whole viewport height, allowing the product card to be centered.

  • You can also set the containing div to display: flex along with align-items: center, justify-content: center. More on that here 👉How to Center in CSS with Flexbox

  Hope you find this helpuf! Happy coding😎

  Marked as helpful

  1
• 

  Vlad•60

  @VlaaadddSubmitted over 2 years ago

  I'm currently learning front end development sooo, I want to hear every opinion about my code. Thank you!

  

  Product preview card

  2

  40
  

  Juan Hamilton•470

  @hamilton-i7Posted over 2 years ago

  Hello, Vlad!👋

  Congratulations for completing another challenge. You did a good job nailing the design😊

  A few basic things I would suggest to improve your solution:

  • Consider implementing semantic HTML tags, such as: <header></header>, <main></main>, <footer></footer> in order to give a more meaningful structure to your code. Your can read more about it here 👉Semantic HTML5 Elements Explained.
  • Be mindful about closing all your tags.
  • Try to make your website responsive by using relative units like rem or em, especially on font sizes and also providing the right layout depending on screen size. For this I would suggest checking out the basics of media queries (i.e. @media (min-width...)). More on that here 👉 Responsive Web Design - Media Queries.

  Hope this all helps you and happy coding!😎

  Marked as helpful

  1