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

Responsive Profile Card Component

Bogdan Kim 780

@semperprimum

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 would greatly appreciate any feedback you may have!

  • Is my .sr-only class correct?
  • Looks like the border-radius property is not functioning as expected on the profile picture in Safari. I attempted including -webkit-border-radius: 50%, but it did not resolve the issue.. What can i do to fix this?

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hey, this looks great! I don't have a screen reader but your sr-only class seems good (probably it's exactly the same I use actually). I'm on Safari and I don't see any issues with the border-radius. The only thing you missed is the box-shadow on the card, other wise it looks kinda pixel-perfect. Well done :)

1

Bogdan Kim 780

@semperprimum

Posted

@FluffyKas I just noticed that the border radius is functioning as expected on mobile Safari, but it seems to be causing issues on macOS Safari. It's quite puzzling 🤔

I appreciate you pointing out the box-shadow. I hadn't noticed it before, but I will make sure to fix it!

Thank you for your valuable feedback!

0
P
Fluffy Kas 7,735

@FluffyKas

Posted

@semperprimum

Hmm, odd. I'm on my mac and I can't see any problems with your image so I'm guessing blindly here: perhaps try setting a border instead of outline (or perhaps whats being described in this stackoverflow post, but dunno, I've never seen this problem, to be honest)? But yeah, it's just a guess without seeing the bug ^^ Well done anyway :)

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