Submitted 3 months ago

Interactive Card Details Form

Patrick•430

@patrickppg

Preview site View code

This is a solution for...Interactive card details form

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Making the positioning and sizing of the cards responsive was initially quite difficult, because the card was resizing but its text content was not scaling accordingly, since the only way I know how to do this in CSS is using viewport relative lengths, which does not work in the way I wanted. As a solution, I implemented the text using SVG.

Community feedback

Mirjax2000•720
@Mirjax2000Posted 2 months ago
Everything`s perfect. Except i have ultrawide monitor, and front and back card are positioned badly, you need to position them absolutly to the gradient side. It maybe look ok on your monitor probably 4:3, or 16:9, Or try this, hold ctrl and scroll down with mouse. you can increase or decrease zoom and you will see what problem is. Otherwise code is perfect. Validation detailed.
1
P
Patrick•430
@patrickppgPosted 2 months ago
@Mirjax2000 That is true! I didn't even notice that. Thanks for the feedback man!
0

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