Design comparison
Solution retrospective
Really nice challenge. If anyone can have a look over the CSS file, to provide any hints how to be made even better, more cleaner. And sort of a problem with the buttons. I tried to go with border: 0 / none, and to have the border: 1px solid white only on hover effect. But, that 1px from the border was added to the overall height of the container, adding a visual effect of growing. In the end I added a 1px solid border to the button as well. Any idea how to maintain the same height of the container even if there is a hover effect and to have a border button of 0? .button { border: 0 / none; } .button:hover { border: 1px solid white; } => an increase of 1 or 2px of the container dimesnsions
my solution , I don,t know how correct it is .button { border: 1px solid color(not to be seen); } .button:hover { border: 1px solid color; }
Community feedback
- @TSune-webPosted over 2 years ago
Hi Andrei Catalin Anghel!
Nice work! Speaking of border width as you asked, if I've understood correctly, you don't want to add border width to the height of the container, right? Your solution works fine, but if you don't want to think of calculating extra width, you can use:
outline: 1px solid color;
The outline property works similarly to a border, but the difference is outline doesn't add its width to the container. So, you don't have to think about extra width👍
I hope this will be helpful!
0@soitirakisPosted over 2 years ago@TSune-web thank you for the advice. I will try it like that as well. Happy coding
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