@snehamoybag
Posted
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:
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 😄
Marked as helpful
