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

Usage of the design UI picture as a background for reference

Richardβ€’ 140

@RixCrafts

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


Unsolved problem

For some reason in the mobile version the UI looks good but it gives the option for scrolling in both directions. I try to hide all the overflow of the elements but still can prevent the scrolling.

Any advice??

Community feedback

SudodoSuβ€’ 210

@SudodoSu

Posted

Hello Coder πŸ‘‹.

Congratulations on successfully completing the challenge! πŸŽ‰

To prevent scrolling on the body element, you can apply the CSS property overflow: hidden to it. This will ensure that the content within the body does not cause any scrolling behavior. By setting overflow to hidden, the scrollbar will be hidden, and users will not be able to scroll within the body.

Here's the updated code snippet:

body {
overflow: hidden;
}

By adding this CSS rule to your stylesheet, you can effectively prevent scrolling on the body element and provide a seamless user experience without unnecessary scrollbars.

You also left one closing </div> element at the bottom of the body.

I hope this helps.

Happy codingπŸ˜„

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