@AntoineC-dev
Posted
Hello Aatif Sohel. Good job on completed this challenge ππ
It looks good at 375px and above 1280px. However as stated by @Yehan20 you should avoid using fixed sizes.
The goal is to make the component take the maximum space available but give it the ability to shrink to fit in the screen.
You have two ways to implement a max-width
:
.my-component {
max-width: 32rem; /* 1rem = 16px */
width: 100%;
}
.my-component {
width: min(100%, 32rem);
}
Secondly I think you should have a transition on your buttons on hover and add the :focus selector to make sure the styles also change when the user focus the button with keyboard navigation.
An implementation could be:
.my-button {
color: white;
background-color: black;
transition: color 300ms linear, background-color 300ms linear;
}
.my-button:hover,
.my-button:focus {
color: black;
background-color: white;
}
Hope it helps. Happy coding. Peace π
Marked as helpful
@aatifsohel
Posted
@AntoineC-dev : Thank you so much for the detailed review!
I will try to apply what said!