I noticed a couple of things that might help improve your CSS! # First, instead of using a hover effect on .card_link with :hover::before and :focus-visible::before for border changes, you can use the :focus-within pseudo-class on the .card element itself. This way, whenever any child element inside the .card is focused, the parent gets styled. For example: .card:focus-within { outline: 2px dashed orange; } I used outline instead of border since outline doesn't take up space in the DOM! # Also, regarding the grid layout where you have: .list { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } This can cause overflow issues on smaller viewports when the width goes below 18rem. A simple fix is to use the CSS min() function, like this: .list { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); } This way, the column will shrink to 100% when the viewport is narrower than 18rem. Hope this helps!
I noticed a couple of things that might help improve your CSS!
# First, instead of using a hover effect on .card_link with :hover::before and :focus-visible::before for border changes, you can use the :focus-within pseudo-class on the .card element itself. This way, whenever any child element inside the .card is focused, the parent gets styled. For example:
.card:focus-within {
outline: 2px dashed orange;
}
I used outline instead of border since outline doesn't take up space in the DOM!
# Also, regarding the grid layout where you have:
.list {
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
This can cause overflow issues on smaller viewports when the width goes below 18rem. A simple fix is to use the CSS min() function, like this:
.list {
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
This way, the column will shrink to 100% when the viewport is narrower than 18rem.
Hope this helps!
Great tips! Thanks for sharing. I'll be updating my cards on my website, as well as within my Starter project with these tips.
glad it can help!
Good stuff💪🏻 I really enjoy watching you and Tricks equipping Webflow devs. More accessibility videos please😊
Thank you! I've been working on improving my web dev best practices.
@@webbae awesome, looking forward to this🫠
🎵 🎶 🎵 hey there web bae
🥲