NFT preview card component using flexbox

Community feedback

• 

  Kelvin•915

  @Kl3vaPosted over 2 years ago

  Oh! I thought you were referring to the first image. Your icon is a child element of a child element of the container you set display flex on. So, align self won’t work on it.

  Marked as helpful

  0

  ---

  

  P

  Biljana Kotevska•130

  @BiljanaKotevPosted over 2 years ago

  @Kl3va oh ok thanks, got it!

  0

  

  P

  Biljana Kotevska•130

  @BiljanaKotevPosted over 2 years ago

  @Kl3va i updated my code! i eliminated a div so that there was only 1 child element and then used align self accordingly, thanks for your help.

  1

  

  Kelvin•915

  @Kl3vaPosted over 2 years ago

  @BiljanaKotev I'm glad I could be of help. Happy coding.

  0
• 

  Kelvin•915

  @Kl3vaPosted over 2 years ago

  Hi Biljana, your solution looks great. As regards to issue you encountered; you can try to set display:flex, flex-direction:column and use the justify content to align the items across horizontal axis since by default flex-direction is usually set to row. For the height, you can specify auto as value.

  Marked as helpful

  0

  ---

  

  P

  Biljana Kotevska•130

  @BiljanaKotevPosted over 2 years ago

  @Kl3va but when i want to position the items separately within the flex container, I'm supposed to use the align-self property...for example the eth icon wasnt centering properly but the other 2 elements the price and days were fine with the align-item:baseline and justify-content: space evenly so i was trying to apply the align-self property onto the icon but it wouldnt work...so i just used margin.

  0

  

  Kelvin•915

  @Kl3vaPosted over 2 years ago

  @BiljanaKotev You didn’t set display on the main container. Also, you wrapped your img around the a tag. Try setting it to display:block. I will try to inspect it later using my laptop, I’m using my phone to understand your code

  0

  

  P

  Biljana Kotevska•130

  @BiljanaKotevPosted over 2 years ago

  @Kl3va I set display flex on the parent container (.price-days) of the elements i needed to flex. OK thanks.

  0