Skip to content
Submitted over 1 year ago

profile card component with nasty background bubbles

colognia•70
@colognia
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi folks!

  • could not make the background bubbles responsive with css. My result matches for desktop, but not for mobile. Tried everything with relative positioning, transform etc. Adding the bubbles as background pictures for body{} does not work anyway, because you can not transform them. Even in a normal div they are not responsive like they should and are not adapting properly to different viewports. :/ Please tell me how the magic works. Thank you!

Community feedback

  • Tushar Biswas•4,080
    @itushPosted over 1 year ago

    Congratulations on completing the challenge! 🎉

    • To fix the issues with nasty background bubbles please remove images from "maincontainer" and add them using CSS.
    body {
display: flex;
justify-content: center;
align-items: center;   
min-height: 100vh;
background-image: url('../'), url('../');
background-repeat: no-repeat, no-repeat;
background-position: right 50vw bottom 50vh, left 50vw top 50vh;    
}
    • Please update me with the result.
    Marked as helpful
    0
    colognia•70
    @cologniaPosted over 1 year ago

    @itush Hihi! Thank you so much for for help! Now I got it and my bubble trouble is fixed. :) Fancy backgrounds are so important, especially with multiple images. I learned an important lesson for the future. =]

    1
    Tushar Biswas•4,080
    @itushPosted over 1 year ago

    @colognia

    You are most welcome!

    Yay... you finally fixed the BUBBLE TROUBLE 😁

    BTW: It would mean the world to me, and help me provide quality support to the community, if you could spare a moment to give my GitHub pinned projects a ⭐️ star.

    0
    colognia•70
    @cologniaPosted over 1 year ago

    @itush Done! Thank you so much helping us newbies! :)

    1
    Tushar Biswas•4,080
    @itushPosted over 1 year ago

    @colognia

    Always happy to help ;)

    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