Submitted about 3 years ago

Profile Card Component with Html/CSS

Ildrim•50

@Ildrim

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, this is the 4th project i'm finishing, and all in all i think it went well.

But... as always i have a couple of questions as to how it could have been done better....

1st I'm not sure if my approach on the positioning of the background images was the most conventional one... i finished the project using the snippet below

body {
  background-color: hsl(185, 75%, 39%);
  background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");
  background-position: right 50vw bottom 50vh, left 50vw top 50vh;
  background-repeat: no-repeat, no-repeat;
}

but how do you think could have been done better?

and 2nd,

why is it that whenever i tried to center my card using flexbox, the card would collapse when it had a max-width in it? it would only work if it had a specific width like e.g width:375px

Once again ty very much in advance for any help you'll be able to provide me with!

cheers!

Community feedback

Ben•770
@BenConfigPosted about 3 years ago
Hi Ildrim, well done, your page looks good!

I believe you can remove the second no-repeat on your background-repeat property. It only needs to be declared once as it will apply to both background images.

If you wanted, there is a background shorthand property that combines all of the individual background properties you have used. Although the way you have done it might actually be more readable.

Regarding your second problem, I think that is just the default behaviour of flex (and grid), when applying justify-content: center, i.e. the element will be compressed as much as possible even if it is a block level element. I think width: 100%; would fix it?
1
Ildrim•50
@IldrimPosted about 3 years ago
Hello @BenConfig ,

ty for your reply,
well yes the shorthand is a bit too confusing to read in my opinion ^^.

width:100%; indeed fixes it, but! only when i flex the card inside "main" as a container for example, if i try to do it from body (center card using flex) it still collapses my card to which i still have no clue why ! xD

once again ty very much for your help and the time you spent in doing so!

cheers!
0

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