Skip to content
Submitted over 1 year ago

responsive page using SCSS

ashleyftw•120
@ashleyftw
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

Does anyone have tips on how to make the background pattern responsive to the parent container? I set a width on the parent container and set the img inside with percentage but it doesn't scale very well. Any tips are welcome! Thanks!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hello! 👋

    Which pattern that you are talking about? The card pattern (images/bg-pattern-card.svg) or the background patterns for the page?

    For the background patterns, I recommend using pseudo-elements. You can see this solution for your reference: Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution

    Alternative text for the profile picture should be the name of the person. Any words that are related to "image" (for example, picture, photo, logo, icon, graphic, and avatar) should not be included in alternative text.

    I recommend making the statistic a list of three bullet points. The statistic numbers should not be <h3>.

    I hope this helps. Happy coding! 👍

    Marked as helpful
    0
    ashleyftw•120
    @ashleyftwPosted over 1 year ago

    @vanzasetia thank you so much for the tips!

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    @ashleyftw

    No problem!

    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