Submitted about 2 years ago

NFT Preview Card

alonshav• 20

@alonshav

Preview site View code

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi everyone, a few questions on the my solution:

Is my solution responsive enough? Is there away to make it more responsive?
Regarding the active state - I inserted the actually SVG in my HTML in order to create the transition in CSS. Should I have used an external link instead? What would you prefer?
What about the global parameter in my CSS? Is this a good way to easily modify the design in the future? Am I missing something useful in my Root properties? Is using REM preferable in this case? Or would you use different Units?

Thank you!

Community feedback

Grace• 27,930

@grace-snow

Posted about 2 years ago

I'm afraid this solution is totally broken for me on mobile in portrait and landscape. The card overflows my screen in both of those circumstances and scroll has been disabled meaning I can't see all the content

Grace• 27,930

@grace-snow

Posted about 2 years ago

Some ideas for you

use meaningful elements like paragraphs and headings etc, never have text in spans or divs alone
decorative / meaningless images should have empty alt attributes, only valuable images need a readable description
anything with a hover style means it's interactive. That means it's essential to use an interactive element there every time
remove all heights, widths, positions fixed and absolutes from this challenge. You don't need them and they are breaking your solution. Instead all you need for the sizing is: (1) a max width in rem (or px if you're not comfortable using rem yet) on the card; (2) a little padding and margin on that card (margin will stop it hitting screen edges, you could also acheive this with padding on an outer element like the body); (3) display block and width 100% on the image.

I hope this points you in the right direction - start making those changes in devtools with it open on the side and you'll start to see the benefits as you shrink and grow the viewport

Marked as helpful

alonshav• 20

@alonshav

Posted about 2 years ago

@grace-snow Thank you so much for your super helpful advice! I really appreciate it. I'll do my best to fix these issues according to your guidance.

Naveen Gumaste• 10,480

@NaveenGumaste

Posted about 2 years ago

Hello alonshav ! Congo 👏 on completing this challenge

Let's look at some of your issues, shall we:

Add Main tag after body <main class="container"></main>
To center the card vertically

min-height: 100vh;
display: flex;
justify-content: center
align-item: center;

or use this 👇

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

Learn more on accessibility issues

happy Coding😀

Grace• 27,930

@grace-snow

Posted about 2 years ago

@Crazimonk don't use position absolute like this! This would break the solution taking all content out of the document flow. That transform translate method should only be used for very specific circumstances and those are rare these days because of all the downsides of that technique

alonshav• 20

@alonshav

Posted about 2 years ago

@Crazimonk Thank you for helping me out!

Aadvik• 1,250

@Aadv1k

Posted about 2 years ago

While there is no such thing as responsive "enough" I would advice you to add a media query for smaller devices to maybe change up the width or the padding.
The way I did the active state was to have the image and a absolutely positioned "overlay" div within a parent element, then you can reduce the opacity of the overlay and set the z-index to be on top.

Please log in to post a comment

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