Skip to content
Submitted over 4 years ago

Newbie - Card component

Pisca•55
@hliosdja
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'm having trouble with the svg background for mobile view, I tried doing it with media query but it ended up messing the web page so i removed it.

My only question was, were there any other approach on how to do it on mobile view to look like the one provided on the design? or is it even good to apply those SVG background via CSS and not on the html? This is my first time using an SVG for making a web page and I'm also still a newbie as a frontend so i was a bit confused on how to do it.

It's a real fun doing the challenge and I'm looking forward to the next one.

Code

Please log in to post a comment

Log in

Community feedback

  • Shivam•520
    @shivjoshi1996

    Hey there!

    Awesome attempt on this challenge.

    For the SVG background, instead of using units like 100px, try and use units that are relative to the viewport (vh, which is the viewport height, and vw which is the viewport width.

    For example, if you replace what you currently have with background-position: right 50vw bottom 40vh, left 50vw top 50vh; , then the circles should look a little better on mobile and desktop, because they're moving depending on the size of the actual screen.

    You can then add a media query and tweak those units around so that it looks good on mobile and desktop, but you may not need to. Also, adding an SVG using CSS is perfectly fine (especially if it's just for decoration purposes and does not have any functional impact to the page).

  • Efosa Collins EVBOWE•365
    @efecollins

    Speaking of which, the comments above concerning the SVG should help but the NAME, AGE and Number of followers, blah, blah. You should make it less bold than that.

    Doing this will make it look less painful and sharp to the eye

  • jul_julham•210
    @zulhamsy

    Hi! Great work!

    I'm newbie too xD, but maybe some advice would help :D

    I think whether you using 'background' props via css or directly using img tag on html, the result will still be good and still a valid html, but for me I prefer using img tag since it would be easier to 'position' it using absolute props

    btw keep your great 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