Skip to content
Submitted over 3 years ago

Profile Card Component Using CSS Flexbox

Wendiie-O•10
@Wendiie-O
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

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

  • Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    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-OPosted over 3 years ago

    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
    Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    @Wendiie-O happy to help :)

    0
  • Alexei•831
    @Batareika007Posted over 3 years ago

    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-OPosted over 3 years ago

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

    0
  • Mohamed Donzo•165
    @demahom18Posted over 3 years ago

    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-OPosted over 3 years ago

    @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

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