Skip to content
Submitted over 2 years ago

Profile Card Component using Flex & Grid w/ Translates

vite
Gabriel Montplaisir•210
@GabrielMontplaisir
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Setting position: absolute on the circle images (For the avatar picture & background circles) and transform: transition() them to the appropriate spot did the trick. However, I'm having a hard time to match them in their mobile version. I have a feeling it may be fixed using clamp(), but would have to play with it some more.

Let me know if you have any feedback!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Alamin•1,980
    @CodeWithAlamin

    Hi Gabriel Montplaisir👋 Great job on completing this challenge! 🥳

    Here are a few specific tips and suggestions for creating a responsive design that works well on mobile devices:

    • Keep the layout simple and focused on the most important content and features. On small screens, it's important to prioritize the content that is most valuable to your users, and to make it easy to access and use.

    • Use a mobile-first approach, where you design for the smallest screen size first and then add styles for larger screens as needed. This can help you ensure that the mobile version of your site is optimized for small screens and touch-based interaction, and can make it easier to create a cohesive design across devices.

    • Use responsive images, by using the srcset and sizes attributes on the img element or the picture element with the source element. This will allow you to serve different versions of an image at different resolutions, depending on the size of the viewport and the pixel density of the device.

    • Use touch-friendly design elements, such as larger buttons and clickable areas, to make it easier for users to interact with your site on mobile devices.

    • Test your design on a variety of mobile devices to ensure that it looks and works as intended. This can help you identify and fix any issues that may not be apparent on desktop screens.

    By the way, this is a well done solution to the challenge. Great job!

    I hope this feedback was helpful. 😊 Keep up the good work!👍

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