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 card component

Rita 40

@ritaogada

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 do I resize the overlay view-icon image?

Thanks! :-)

Community feedback

@cgrkzlkn

Posted

Great job! Icon size problem is because of this CSS:

.equilibrium-pic img {
   width:100%;
}

Remove this CSS and also remove width:50% on the view icon.

Then add a class to the main image:

<img class="main-image" src="./images/image-equilibrium.jpg" alt="equilibrium-image">

And add that CSS only to this class:

.main-image {
   width:100%;
}

Marked as helpful

1

Rita 40

@ritaogada

Posted

@cgrkzlkn Wow! Thanks Cagri! It worked!

Turns out it was a problem with targeting a div and an image... Thanks a lot.

1

@cgrkzlkn

Posted

@ritaogada I'm glad it solved the problem! If you found it helpful, you can mark my comment as helpful, thanks.

1
Rita 40

@ritaogada

Posted

@cgrkzlkn Done🙂

1

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