@elaineleung
Posted
Hi Amritpal, well done completing this; I think it looks great on the whole, and it also works well. Great job especially in using a header object because I don't have any issues viewing it on Firefox (which I normally do for these solutions), and the header you added is different might have been one I tried but didn't work, so it's good to see it working here!
You do need to fix your widths a bit as right now, the container div is really wide in desktop view due to the width: 92vw in your container. To fix that, you just need to replace that with max-width: 600px (or whatever max width value you choose) in your container class, and add a 1rem margin for the container also so that the sides won't touch in mobile view. At mobile view I was trying to figure out why things won't shrink down, and it turns out you don't have a reset/normalize rule for images, and so your border line is causing the whole container to not be responsive. To fix this, add this rule under your * selector rule:
img, svg {
max-width: 100%;
display: block;
}
After that, the max-width on the container should be able to do its work even in mobile view.
Lastly, I highly suggest that you use reset/normalize rules for all projects, as you will find that they can save you a lot of headache when troubleshooting. As good practice, I would also separate the declarations and not lump the styling declarations with the reset in your * selector rule. Even though there are no major issues and things work, it just makes for better readability when reset/normalize rules are clearly separated from styling rules.
Great job, and keep going! 😊
