Submitted over 3 years ago

css grid / flexbox / sass

Rodrigo Alas•55

@javieralas05

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello there,

I used css grid for profile card and bubble images. I found really hard to position the images using relative and absolute position. I guess is because I rarely use it, any suggestion on how to use them more often, I find it really hard to position item without using flexbox and grid. Anyways, any feeback it's going to be so very welcome, feedback from previous projects helped me a loot!

Community feedback

Vanza Setia•27,775

@vanzasetiaPosted over 3 years ago

👋Hi Rodrigo Alas! My name is Vanza!

My recommendation on positioning those bubbles are using something like this:

body {
  background-image: 
    url('../images/bg-pattern-top.svg'),
    url('../images/bg-pattern-bottom.svg');
  background-position: 
    right calc(47vw + 15%) bottom calc(65vh - 15vw),
    left calc(40vw + 25%) top calc(72vh - 15vw);
  background-repeat: no-repeat;
  min-height: 100vh;
  overflow-x: hidden;
}

Also for the followers, likes, and photos stats, you can use ul and li rather than div.

That's it! Hopefully this is helpful!

Please log in to post a comment

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