Skip to content
Submitted about 3 years ago

Profile card component solution

GabFerreira•240
@Gab-Ferreira
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, I have problems with media queries : When I'm doing the code on my pc and I'm watching the result for smartphone with F12, the result is good. But when I publish the page and looking for the result with my phone, the result is horrible. Any suggestions ?

When I wanted to use transform: translate(-50%, -50%) it not worked, my card was somewhere I couldn't see, however I saw on the internet that it was the solution to center a div in the page. I'm lost, any solutions ?

Thank you for your time :).

Community feedback

  • Fernando FeN•425
    @Fernando0654Posted about 3 years ago

    Avoid using px most of the time. I was checking your code, but I can't find your transform: translate. If you're using this prop, don't forget to add the top and left properties. Otherwise won't work as you expected. Hope this is helpful, good luck!

    Marked as helpful
    0
  • Leonardo Araújo•40
    @araujoleonardo310Posted about 3 years ago

    Hi, Gabferreira's :)

    You need to learn about responsive and using DevTools. This video will help you.

    https://www.youtube.com/watch?v=yU7jJ3NbPdA

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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