nft-preview-card-component using flex

Community feedback

• 

  P

  Alper•1,090

  @adonmez04

  Posted almost 2 years ago

  Hi, @rsacharias. That's a good solution. Keep coding. Here are some important tips.

  1 - You have to use some resets to fully control the box model. Use this ruleset for this basically:

  *, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  

  You will find many other good CSS resets on the internet, such as joshwcomeau's and Andy Bell's

  2 - You don't need to declare any values for the width property of your elements. You can use max-width instead of width.

  3 - You can use vertical-align: middle; to align your elements vertically. For example:

  .assets .icon {
    vertical-align: middle;
  }
  

  Sometimes, we use so much flex properties for our elements. It's totally normal. To keep it simple this status, we can create some flex classes and we use these styles from HTML as a class. You will see some classes in HTML flex, flex-col- flex-row etc. You can try this style when you are considering using that much flex for your elements.

  I hope these will help you. Keep coding and have a wonderful day.

  13

  Marked as helpful
• 

  P

  Alper•1,090

  @adonmez04

  Posted almost 2 years ago

  @rsacharias Organizing your CSS It looks like a good resource, I have been trying to find something like this for a long time, thanks.

  I checked your code and it looks more legible and consistent now. That's an improvement. We won't get our perfect code the first time. We need to improve our code with each version of the solution. Step by step, at some point, we'll have our perfect code.

  I highly recommend solving your challenges over and over again. You can create a new repo and give it a new version name like v2.0 etc. That way, you can compare your first version with the latest version of the project. And you'll see your process clearly.

  Another thing is this ruleset:

  html {
    font-size: 16px;
  }
  

  You don't need to declare this. The font-size is equal to the browser's default (and it's mostly 16px, but it's a computed value, not a present value), and it can be set by the user. If you declare 16px in CSS, you break this HTML behavior. Allow the browser to set this value to the user's preference.

  Keep coding and have a wonderful day.

  00