Design comparison
Solution retrospective
The challenge was pretty straightforward but I encountered some error I found hard to handle. How can I prevent the background color of the button from reducing in idth as the screen size is reduced apart from adding a media query.
Community feedback
- @AlyferJTPosted 8 months ago
Hey there, congratulations for completing the challenge.
I saw that you used
%
on the width of the 'Learning',%
gets it's parents size and grab it's%
.So if the parent size reduces, it reduces too.
I'm not so expert on that, but i know that this is causing your problem, and i recommend you to search about the
size units css
, so you can understand why.I recommend you to use
rem
, and set a width you would like in the 'Learning'.Sorry for my bad english '-.-
Marked as helpful2 - @danielmrz-devPosted 8 months ago
Hello @des254!
Your project looks great!
I have one suggestion for you to improve it even more:
- Using
position: absolute
is not the best option to center an element. This method can cause bugs and may result in part of the content being cut off on smaller screens.
Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:
š Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
I hope it helps!
Other than that, great job!
0 - Using
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