NFT Card component

Community feedback

• 

  Elaine•11,340

  @elaineleung

  Posted almost 3 years ago

  Hi Vincent Daniel, great job in putting this together and especially in learning to use pseudo classes! 😊 I think this is a good attempt in positioning elements, and I would say the next thing to work on is how to make this component responsive. There's a lot of fixed widths used and even padding for positioning, which makes it difficult for the browser to resize the component at smaller browser widths. I tried in the inspector just now to see how I change some of these properties, and I still can't make the component responsive. For instance, for the first-span and second-span, they are separated by a 4.75em of padding, meaning that gap is fully filled with a fixed padding and cannot be changed. To separate them, I would use flexbox instead and would use justify-content to keep them separated, as that way, the gap between them is flexible and the component can also be resized.

  In short, I recommend using responsive properties such as max-width and to be less reliant on using fixed widths for positioning. To see what I mean about responsiveness, you can have a look at my solution here and resize the browser width to see how the component responds.

  I do think you did well here on the whole in building this, well done!

  11

  Marked as helpful