Skip to content
Submitted over 3 years ago

Profile card layout using HTML CSS Grids, Flex, media quesries

Ritesh_Gupta•520
@b4n1y4
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

Hey everyone, I made this layout but could not make the svg background fully responsive, though it works at specified widths, it does not remain the same on other screen sizes.... Any other feedback is appreciated!!!

Community feedback

  • Benjo Quilario•1,810
    @benjoquilarioPosted over 3 years ago

    Hi @Retish_Gupta, we have a same problem when, I'm creating this project.

    Try this code: background-image: url("../images/bg-pattern-top.svg"), url("../images/bg-pattern-bottom.svg"); background-repeat: no-repeat; background-position: right 50vw bottom 40vh, left 50vw top 40vh;

    keep coding🔥🔥

    1
    Ritesh_Gupta•520
    @b4n1y4Posted over 3 years ago

    @benjoquilario Thank you so much!!! That works!!! Looks like I still have a lot to learn.... Thanks man!!!

    0
    Benjo Quilario•1,810
    @benjoquilarioPosted over 3 years ago

    @b4n1y4, haha Glad you learned something, too!

    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