Responsive Profile-Card-Component using CSS Grid

Community feedback

• 

  Snehamoy Bag•600

  @snehamoybag

  Posted almost 3 years ago

  Hi Chan 🙋‍♂️ Great try attempting this challenge 👏 I too struggled positioning the background-circle images 😂 its no big deal though as a developer we learn new things when we get stuck 😁

  So for your queries you don't actually have to place the images on your html. You can set multiple background images separating them with commas ,. Like this background-image: url(images/1st-img.svg) , url(images/2nd-img.svg);

  Similarly to position the two images separately you can do something like this background-position: right 52vw bottom 35vh, left 49vw top 49vh ; As you can see, we used , to position the two different images seperately. 😃

  To make the profile card responsive, You can set its default width to something like width: 90% and to make the card not get too wide add a calculated max-width, like max-width: 21rem

  Here are few documents you can check to learn more about this:

  • background-image
  • background-position
  • background-size
  • learn more about css units

  And as a final note, You don't really have to create a separate css file for the mobile version . You can add as many media queries you want in a single css file. 👍

  Feel free to reply if you need any further help 😄

  00

  Marked as helpful