Design comparison
Solution retrospective
I have struggled to fix responsive layouts. How do I get rid of the horizontal scroll bars along the bottom of the screen when resizing the website? Please, review my code and give me any suggestions to improve my code.
Community feedback
- @pikapikamartPosted over 3 years ago
Hey, great work on this one. The layout in desktop is good and the mobile state is good as well.
My suggestion/s would be that;
-
I suggest you used a fixed height on the
header
tag likeheight: unit rem
so that it won't shrink down like it is doing now when opening dev tools from the bottom and scaling it, or you could just add somemargin-bottom
on yourcontent
selector in the header section. Just to give height to the container itself. -
I think that the hover animations are a bit too long. Tweaking the duration will be good. (Personal preference right)
-
Resizing, there is a scrollbar right. In your
.infrastructure-img .container-img
selector, remove thewidth: 100%
and it will fix the scrollbar problem and there will be no appearance after that :>>
Overall, really good work on this one^^
0@NoorAlhijabPosted over 3 years ago@pikamart Thank you for your suggestions. These helped me fixing the scroll bar issue and improving my website.
0 -
- @jsharp0Posted over 3 years ago
Looks great! Horizontal scrollbars usually show up with the width of your content exceeds the width of a screen. If you want to get rid of it, hide the overflow on your main body in your css file.
overflow: hidden;
0@NoorAlhijabPosted over 3 years ago@jsharp0 Thank you for your feedback. I already have overflow in my project. I am going to modify the width to fit the screen width.
0
Please log in to post a comment
Log in with GitHubJoin 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