@pikapikamart
Posted
Hey good work on this one. But first a couple of suggestion.
-
Changing the
.profile_box
ofposition: absolute
. Since you declared it like that, thebody
tag now has no height dimension because when youposition: absolute
an element, it goes out of the flow, so any container containing them will have their dimension be gone, unless there is specified height or width on it. -
Adding more width. Right now it only takes 35% of the viewport's width which is very small when going in mobile state. Maybe it will be good if you declared like a fixed width on it. And just change that width in the breakpoint.
Now, regarding you query.
- Okay for background positioning, you can declare background like this, this is a shorthand version to avoid many typings. `background: hsl(185, 75%, 39%) url("/images/bg-pattern-top.svg") no-repeat -50% -50%.
Okay let's break that down so that it will be easy.
- As you can see, the first argument is the
background-color
the hsl - The second argument is the
background-image
that you want - The third argument, it is important, usually when we want a single image, we use
no-repeat
as the value, in your case you userepeat
which makes things a bit of mess.no-reapet
is the best choice in here. - The fourth argument is the
background-position
. You can specify there where you want the image to be placed. The first -50% is the x-axis and second is the y-axis.
Now using background-property, you can declare multiple things like this one.
background: url("/images/bg-pattern-top.svg") no-repeat -50% -50%,
url("/images/bg-pattern-bottom.svg") no-repeat center top,
url("/images/bg-pattern-top.svg") no-repeat 25rem 33rem;
As you can see, you can declare multiple things like that, I usually don't add the background color in that, if I am declaring multiple images. I seperate it.
- For the list like you mentioned, using
display: flex
on the parentul
is one great solution, or using grids. Using them will make your css more minified since you only need to declare few right. Reading about them is really good.
Just those few above needs to be addressed. The mobile views needs to be changed as well as the image on that container is having a big height which is kinda bothersome. Just study those and just keep doing challenges, but doing it the right and semantic way. Okay^^
@imbhaskarn
Posted
Thanks a lot @pikamart for sugestions