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

Background image transform translate

@jvmdo

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Context 1

I could not get to the same background as the design using background property by default. Instead, I made a workaround using transform: translate().

Question 1

Is this approach OK or there is better one?

Context 2

My approach worked, however, with a side effect: the bottom image overflows. I set overflow: clip (tried hidden also) then the user can't neither see nor scroll over the unwanted area but the Edge Dev Tools remains displaying overflow area also the scroll bars.

Question 2

Is it just an Edge bug or the expected behavior?

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello João Oliveira, Congratulations on completing this challenge!

Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

To make your solution even better and more responsive, you can create a media query to break the elements in the pricing section after width: 350px and make every content in a different row, saving space for low resolution devices.

@media (max-width: 350px) {
main > footer {
    display: flex;
    justify-content: space-around;
    padding: 2rem;
    flex-direction: column;
}
}

✌️ I hope this helps you and happy coding!

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