Design comparison
Solution retrospective
I am most proud of the fact that I learned some new skills doing this project and encountered elements I hadn't previously come across such as SVG elements, which required some research into styling. I'd also never dabbled with the interface itself being different on different devices, so I learned how to replace a regular navigation bar with a hamburger menu depending on the device.
I spent too much time trying to make styles work for specific devices that I made the mistake of hardcoding certain element sizes and positions, as such zooming in and out on desktop changes the styling and I plan to return to the project to fix that.
What challenges did you encounter, and how did you overcome them?After deploying the URL, I tested it on my mobile and found my mobile device's screen size was larger than Chrome dev tool's largest mobile option, this altered styling quite a bit, so I returned to it post-deployment to ensure it also worked on my device.
I had some struggles changing the colour of the SVG element on the footer, since it didn't use the same properties as a regular image tag, but after some research I learned the correct methods to apply to SVG.
What specific areas of your project would you like help with?What technologies would people recommend that make responsive styling (orstylign in general) easier for them outside of vanilla CSS?
Community feedback
- @NeoScripterPosted 2 months ago
Hey, Mikael. I checked your solution and here are my suggestions:
- Your navigation bar is overflowing to the right on small screens. You don't need to use the position absolute on it and set the width 100vw. You can just put it in a header in a static position in a div and it will automatically adjust to the screen size without overflowing.
- Your nav menu items change the size on hover because you set extra padding on hover. That's why they are noticeably change their position, creating a little bit jerky effect. What you can do is set padding on each nav menu element by default so that they don't change on hover. Also, you could set transition on background color on them to make it smooth on hover.
- For the hero image, instead of using a regular image, I suggest you use it as a background image with background-size cover so that it doesn't squish on smaller screens.
- The text on the cherry and orange should be black so that it stand out and more readable.
- Don't set explicit height on footer as it gets very small on smaller screens. Instead, you min-height.
- The entire layout breaks when I reduce the screen size. You might wanna adapt it to every screen size from 320px to 1920px. Try not to set explicit width on parent containers as it breaks the layout. Use max-width instead.
I hope these suggestions help, good luck!
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