Skip to content
Submitted over 3 years ago

Profile Card Page

Musha•100
@mushamak
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

This is my third challenge and I'm struggling with making a responsive page. How can I improve it or what should I specifically pay attention to?

Thank you for suggestions!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hi, Musha! 👋

    Good effort on this challenge! 👍

    I suggest,

    • Decreasing the overall size of the card component and the text inside it (since it's quite large, at the moment).
    • Considering using CSS background images to add and position the background shapes in this challenge, since that'll keep the images out of your markup (which will make your HTML slightly cleaner) and I think it's a little easier to manage the background images, then. You can also use viewport units to position the background images so that they more or less remain in their place when the screen is resized.

    Keep coding (and happy coding, too)! 😁

    0
    Musha•100
    @mushamakPosted over 3 years ago

    @ApplePieGiraffe Got it. Thank you!

    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    Free yourself from trying to make it responsive... Try to match the mobile image layout and fonts then use a media query as the page grows to transition it to the desktop layout size and fonts. This is not a project to try to makes scale 100% perfect from mobile to desktop

    0
    Musha•100
    @mushamakPosted over 3 years ago

    @palgramming I see Thank you.

    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