@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
BACKGROUND iMAGE 📸:
- Looks like the background svg has not been properly set yet, The background is being shrinked/expanded when we try to zoom-in/zoom-out the browser window. We must need to fix this issue.
- So let me share my css snippet which helps you to easily apply the
background colorwith thebackground svgthey provided to place perfectly as same as design.
- Add the following style rule to your css, and then experience the changes
body {
background: top/contain url(./images/pattern-background-desktop.svg) no-repeat, #E1E9FF;
}
- Tip, Don't forget to generate a new screenshot after editing the
cssfile
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@Leo-Code-CA
Posted
Hello @0xAbdulKhalid ! Thank you for your input, it's always appreciated to receive a feedback!
However, I think you might not have looked at this project closely enough. You told me the background is being shrank/expanded when you try to zoom-in/zoom-out the browser window. That's actually what's expected from what I understand!
In that project, you have two different designs: the desktop and the mobile version (maybe you don't know that if you haven't done the project yourself?). The background is not the same in the two versions. For the desktop one, you have this "wave" design made of two different colors. However, in the mobile version, the background is uniform, it has only one color and no wave design (at least from what my eyes can see!).
I've created a media query that changes the background from the mobile/ laptop version to the desktop version when the viewport width reaches 1280px so I think it's correct! Let me know if you still think otherwise!
Finally, you haven't answered to my initial question about CSS classes. Could you maybe give me some advice about those?
Thanks a lot! Have a good night/ day depending on where you live :)!
@0xabdulkhaliq
Posted
@Leo-Code-CA Thoughts from your side are always welcome!
The background svg needs to be fixed, We can't let it to be zoomed-in or zoomed-out.
I know that it has a separate background from Mobile, not only for this challenge for every challenge you will be provided with two variant if it has bg patterns.
But for this one you have applied background-size: 600%, instead you can add top/100% infront of url() value for background property.
And finally, I would recommend you to check out BEM Methodology to improve your CSS's naming conventions.
Marked as helpful
@Leo-Code-CA
Posted
Hey @0xAbdulKhalid ! Thanks a lot for your detailed explanation. I think I finally got your point! I tried what you suggested and indeed, it's way cleaner that way and we achieve approximately the same result!
Thanks for your recommendation for the CSS classes as well, I'll have a look! Have a great weekend :)!
