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 CSS Flexbox

Wendiie-O 10

@Wendiie-O

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


Can I get feedback on how to get rid of the side scrolling? I'd really appreciate it.

Community feedback

@AgataLiberska

Posted

Hi @Wendiie-O! Do you mean the vertical scrollbar? It appears because you've set the <main> element's min-height to 100vh, and then you've got the attribution <div> underneath it, so your entire <body>'s height is more than the viewport height. You could remove that div or play around with different height settings, for example instead of 100vh, set the height to 95vh etc.

Also, a small detail: because you set the circles as background images to your <main>, the bottom circle cuts off at the bottom where you have the attribution. Not a massive issue for this challenge in my opinion, but it's something worth paying attention to in the future :)

Hope this helps :)

4

Wendiie-O 10

@Wendiie-O

Posted

This solves it exactly the way I wanted. I had to set the background images to the body tag and change the viewport height to accommodate the last div element. Thanks for pointing that out.

0

@AgataLiberska

Posted

@Wendiie-O happy to help :)

0
Alexei 831

@Batareika007

Posted

Hello Wendiie-O,

nice job for your first project

You can change the min-height: 100vh; to other value, or disable flex and put the <div class="attribution"> inside the main tag, but then you need to make some changes to your style.

2

Wendiie-O 10

@Wendiie-O

Posted

@Batareika007 this works too but I didn't want to start changing out my previous styles .Thank you.

0

@demahom18

Posted

Hey how you doing Wendiie, great job on this one (y). To get rid of scrollbar, try overflow-y: hidden to your body

0

Wendiie-O 10

@Wendiie-O

Posted

@demahom18 This completely hides one of my divs. It solves the problem but not the way I want. Thank you though.

0

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