Submitted about 2 years ago

Javascript Interactive Card

Salamah• 90

@Salamah-Jimoh

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive card details form

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

One area I find difficult when styling was making the two cards overlap in a mobile environment. According to the design, the Front-card is supposed to cover some part of the Back-card but when I reduced the margin and changed the position of the Front-card using CSS transform properties, the reverse happened and the front-card was kind of staying behind the back-card. What I did to solve this was to add both card twice in my HTML; one for desktop and mobile device while setting the display to none for each device to avoid repetition. So, for the mobile HTML, I added the back-card image first before adding the front-card image(the reverse of what I did for desktop ) and somehow that solved the problem. I'm not really sure that it's a good practice, so I would really like to know if there's a better way to go about that without having to write the markup twice... Thanks in anticipation

Community feedback

Chisom Udonsi• 700

@TheAce74

Posted about 2 years ago

Congrats on completing the challenge. About the question you asked, next time try tackling the positioning with the "position" property and not the "transform". I'll admit that "transform: translate()" has a bunch of important use cases but "playing around" with positions: absolute and relative would have given you a better result; just by dropping a z-index, you can even throw transform in the mix too

Marked as helpful

Salamah• 90

@Salamah-Jimoh

Posted about 2 years ago

@TheAce74 Alright will surely try this. Thank you

Alex Holguin• 410

@JAleXDesigN

Posted about 2 years ago

Hi Salamah, congrats on completing the challenge, to place an element on top of another you can use the z-index property, for this the element to which you apply the z-index must have the "position" property, whether it is relative, absolute... . I hope my comment will be useful to you.

Salamah• 90

@Salamah-Jimoh

Posted about 2 years ago

@JAleXDesigN Thank you for your response

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