NFT preview card component solution

Community feedback

• 

  Aadvik•1,250

  @Aadv1kPosted almost 3 years ago

  Hi wkan, To answer your first question, to make a element centered within the body you can use

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

  Second, semantic tags are there for two reasons,

  • For better readability

  <div>
  <h1>Hey</h1>
  <p>blah blah</p>
  </div>
  

  it is not clear what this means

  <article>
  <h2> Title </h2>
  <p> Content blah blah </p>
  </article>
  

  Makes it very clear what it means.

  To answer your third question to make the icon and text be vertically aligned you can set the display property of their container to flex, then you can do align-items: center;

  Fourth, there is no single way to make this happen, What I did was a overlay which was the size of the image, by default its display: none on hover it changes display: block; opacity: 0.5;.

  If you have any other queries you can reach me out on twitter or via mail -- [email protected].

  Marked as helpful

  0

  ---

  

  Will•210

  @wkan17012021Posted almost 3 years ago

  @Aadv1k Hi Aadvik, I will try the first code in a new challenge for sure- it seems like a concise solution compared to what i came up with. Thanks for your suggestions on the other queries as well.

  0
• 

  Akrom•40

  @AkromDevPosted almost 3 years ago

  Hi Will. You can use flexbox or position absolute (or fixed) to perfectly center a content.

  These answers might be helpful: Using flex and Using flex or position

  Regarding centering clock, you can use flex instead of float. So in your case, it would be something similar to:

  ` .left_container{

  display: flex;

  gap: 10px; /* space between items */

  align-items: center; / center vertically / }`

  I did this challenge today, you can take a look at my solution if you want.

  https://www.frontendmentor.io/solutions/nft-preview-card-component-5BTmXh1S7

  Edit: had to add empty lines for making text go next line.

  Edit 2: This editor is really painful

  Marked as helpful

  0

  ---

  

  Will•210

  @wkan17012021Posted almost 3 years ago

  @AkromDev Hi Akrom, amazing! Thanks for the tips. This solved the issue for the clock icon and '3 days left' centering. I totally forgot about the gap property which comes in handy here.

  Thanks again.

  0