Design comparison
Solution retrospective
This project helped me learn more about media queries, CSS custom variables, and using the child and sibling selectors. I got as close to the design as I possibly could. In the future, I might redo this project using Tailwind.
One thing that I struggled with was getting the image on mobile to not look so squished. I'll update it the future once I figure that out.
This was a fun project.
Community feedback
- @jNembhardPosted over 2 years ago
Hey Kevin,
Great first attempt! I would suggest stepping thing up a notch after you feel you have a good handle with css to sass code. If you use something like Watch Sass in Visual Studio code, this will ensure your css code is compatible across all browser types.
Also try to make sure the object is centered in the layout for an optimal view. As for making sure the image doesn't get squished, there is a relatively new css code called aspect-ratio that you can set on the image to ensure it maintains it optimal width and height.
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