Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
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

Profile card component solution using flexbox

eshrak 120

@EshrakRahman

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


I didn't have any trouble with the desktop version of the website, but I ran into a big issue when I tried to make it work properly on a 375px widescreen. The problem I faced was related to how the images were positioned, and I spent two whole days trying to figure it out. Thankfully, I found a solution that's a bit of a workaround, but it did the trick.

The problem I was dealing with was that on the mobile screen, the background image at the bottom of the page was overflowing and causing problems with the responsiveness of the site. To solve this, I decided to use the "overflow: hidden" property in the HTML tag, and it worked like a charm. I'm not entirely sure if this is considered a best practice in web design, but I'm really happy that it fixed the issue.

Community feedback

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