Reponsive and style UI using scss file

Please log in to post a comment
Log in with GitHubCommunity feedback
- @GregorDeCillia
Nice job with the responsive layout shift (
flex-direction
)!Here are some points where I think you could improve things in a relatively straightforward way while learning some techniques along the way.
- You are not importing any fonts. If you want to keep things simple and only use web safe fonts, I would still recommend using a serif font for the title and the price.
- At some screen sizes, the image width and height do not have the aspect ratio of the source image. Try
object-fit
(or other options) to avoid distortion. - Consider using
button:focus
to style the button if it is focused via keyboard navigation. Usually you can use the same styling as in the hover state.
.card__image { object-fit: cover; } button:hover, button:focus { /* ... */ }
Happy coding!
- P@jordanallybrown
Excellent work on the layout!
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