@ondickson
Posted
I think this is because your card is a little bit smaller. Anyway, I think your solution is very good. Try using this background-position and see if it fixes it
background-position: -2% -25rem, 100% 30rem;
0
Design comparison
Solution retrospective
I don't think I have solved the background placing issue. Bubbles on background change positions when screen is resized. Please suggest your way of solving this. Thanks.
Community feedback
Vijayalakshmi• 50
@VijayalakshmiGanesh
Posted
Even I face the same issue. A person suggested me to try positioning those bubbles relative to the card itself instead of body. I haven’t tried it yet. Thought it might be helpful to you
0
Givi J.• 130
@WhiteFatal
Posted
@VijayalakshmiGanesh I have looked at other solutions and everyone seems to have the same problem. Positioning relative to the card container might be the way, thanks for the idea.
0
Givi J.• 130
@WhiteFatal
Posted
@VijayalakshmiGanesh It worked! I fixed it using positioning as you advised. Next, I used overflow: hidden in the body to hide lower right part of bubble.
0
Vijayalakshmi• 50
@VijayalakshmiGanesh
Posted
@WhiteFatal Glad it worked for you !
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