Design comparison
Solution retrospective
this is my first try on responsive website and i am pretty glad about the turnout. i had some issues which i have state below and hope someone is kind enough to provide a solution.
-
i was not able to build the menu button: can someone please reference me on how to make responsive mobile menu.
-
why do my fonts size seems to change when i view my website on different browsers. it looks good on mobile view but on desktop it changes paddings and fonts size.
please i would like to know how i can generally improve my Code.
:)
Community feedback
- @eliofloPosted over 1 year ago
Hi,
Great job on your solution so far!
I have a couple of suggestions that could help improve it even further:
-
To make the menu button responsive, you'll need to use some JavaScript and manipulate the display property. You can learn more about this technique by checking out the tutorial on W3Schools.
-
I noticed that the font-size in your solution increases as the viewport size increases because you're using viewport units (vw) to specify the font size. While this can be a useful technique in some cases, it can also lead to inconsistent font sizes on different devices. You may want to consider using rem or em units instead. These units are relative to the font-size of the root element (html) or the parent element, respectively, and do not change with the viewport size. This can help ensure that your font sizes are consistent across different devices. Check out this post on css-tricks to learn more about font size and units.
Keep up the good work! Let me know if you have any questions.
Elio Flores
Marked as helpful0@kingchoffyPosted over 1 year ago@elioflo thank you for your comment. i have been studying more about responsive design and your comment was helpful as it points me to the right direction.
0 -
- @abelmoradPosted over 1 year ago
For the responsive mobile menu, you need to use javascript for that. Here's the video reference for that to help you understand how it works but you have to figure out for yourself how to design per challenge specs. https://www.youtube.com/watch?v=At4B7A4GOPg&t=2s
Your font size changed size because it's changing relative to your viewport width because you are using font-size: 1vw for example. While PX, EM, and REM are primarily used for font sizing, %, VW, and VH are mostly used for margins, padding, spacing, and widths/heights. more info: https://www.freecodecamp.org/news/learn-css-units-em-rem-vh-vw-with-code-examples/
Marked as helpful0@kingchoffyPosted over 1 year ago@abelmorad thank you this was so helpful. i was able to get it fixed i will be updating my solution on here.
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