Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card component using flexbox

Alex 20

@Nexuuuus

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How would I stop the site from extending off into the right and bottom, as it does for me? Are there more efficient ways of positioning the text, more specifically the stats at the bottom?

Community feedback

Account Deleted

The reason the site is extending is because of the bottom background circle. You can see it if you inspect the page with right click and inspect. Remove the background circles from HTML and use the background-image property on the body element in CSS in combination with background-repeat: no-repeat and background-position set in vw and vh.

There will still be a bit of extra space though and the scrollbar will appear because by default the body has a small margin. To remove default margins and paddings from everything use the following code at the beginning of CSS:


*, *::before, *::after {
    padding: 0;
    margin: 0;
}

For stats it would be better to use a <ul> and make each stat a <li>. You should also make the card an <article> or a <section> and try to make it responsive so it changes the size depending on the viewport. Take a look at my solution if you have trouble with anything.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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