Design comparison
Solution retrospective
This is my first whole-page design! I can't believe I got here from coding a simple QR card! It was hard but extremely fun. I used everything I learned and more. My questions as always: -What could I improve? -How do I change the width of the logo svg?? I tried to set width, min-width, and max-width, but none of them worked. -Was my choice of making the two pics in main as an <img> inside a div right? or should I make them appear as a div's background? Thank you!!
Community feedback
- @dusan-bPosted about 2 years ago
Hello Oubaid,
I just looked at your code and I like your solution.
To answer your question, you can easily change the size of inline SVG images by adding
viewBox
and removing theheight
attribute. Then, you define the size you want by changing the value ofwidth
.Here's an example with a width of 200px:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 24" width="200"> ... </svg>
Just make sure that the last two values of
viewBox
are the width and height of the original SVG image.Regarding the main navigation, the menu links should always live inside
nav
, otherwise they are not properly accessible to assistive technology users. Also, your menu button should be abutton
element, not adiv
.There's always space for improvement, but overall I think you made a good job.
Keep it up, and happy coding!
Marked as helpful1@oubaidelmoudhikPosted about 2 years ago@dusan-b Thank you very much!! I will implement your feedback into my code!
0
Please log in to post a comment
Log in with GitHubJoin 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