Submitted about 3 years ago

NFT Preview Card Component using HTML and CSS.

accessibility, theme-ui

TRG•150

@MugeshTRG

A solution to the NFT preview card component challenge

Preview Code

Solution retrospective

Please suggest a cleaner and alternate code if any.

My problem with card component challenges is that I can't center the card vertically(height). Even If I centered on all sides using absolute-relative method or flex, when I add content to the card, scroll-bar appears(even when body height: 100vh)

What I want is to center the card vertically relative to the body, even after adding all content and margin and padding to the elements inside the card, and still achieve with no scrollbar vertically.

Thank You in Advance!

EDIT: margin:auto is applied and it seems to be working. Feedbacks welcomed!

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on TRG's solution.

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