Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card Component using React

Parviz Azerogluโ€ข 150

@ParvizAzeroglu

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can I align text with an image? I would appreciate your help

Community feedback

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

  • It seems you've already aligned the text with the image using display: flex and align-items: center, which is a good approach. However, the issue with the text being pushed down, it might be due to the margin-top: 15px in your .text p styles.

    .text p {
      color: var(--soft-blue);
      font-size: 14px;
      margin-top: 15px; /* This is the main issue - this margin is pushing down the paragraph, preventing proper alignment. */
      font-weight: 300;
    }
    
    /* You can clear the margin using this, and it should center correctly. */
    .static p {
      margin: 0;
    }
    

I hope you find it useful! ๐Ÿ˜„

Happy coding!

Marked as helpful

1

Parviz Azerogluโ€ข 150

@ParvizAzeroglu

Posted

@MelvinAguilar Thank you for your help. This solution solved the problem ๐Ÿ‘

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord