Newbie - Card component

Community feedback

• 

  Shivam•520

  @shivjoshi1996Posted over 3 years ago

  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).

  1

  ---

  

  Pisca•55

  @hliosdjaPosted over 3 years ago

  Thanks for the info, will definitely try it!

  0
• 

  Efosa Collins EVBOWE•365

  @efecollinsPosted over 3 years ago

  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

  0

  ---

  

  Pisca•55

  @hliosdjaPosted over 3 years ago

  Thanks for the feedback!

  1
• 

  jul_julham•210

  @zulhamsyPosted over 3 years ago

  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!

  0

  ---

  

  Pisca•55

  @hliosdjaPosted over 3 years ago

  The first that comes to my mind whenever i see a background design was how can i do it with CSS, so it can also be done directly via HTML.

  Thanks!, will try this later.

  0