Design comparison
Solution retrospective
Hi everyone!
I thoroughly enjoyed working on this project, particularly because it provided more opportunities to create backgrounds with solid colors and strategically placed images.
I have a few questions:
Is the code below considered good practice for setting the background? I want to ensure that I am following best practices as projects become more complex.
.container { width: 375px; height: 1000px; margin: auto; position: relative; background-color: var(--bg-color); /* Set your desired background color */ color: #fff; padding: 5.5rem 1.5rem 4.25rem; }
.container::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url("images/bg-intro-mobile.png") center center/cover; /* Set the path to your faint image */ opacity: 0.75; }
Regarding responsiveness, are my media queries well-implemented, and is the project truly responsive? Can I do more to enhance its responsiveness?
I would greatly appreciate your thoughts on these matters.
Thank you for your time,
Gerardo Garcia
Community feedback
- @ratul0407Posted 11 months ago
@GGSWEngineer congrats on completing this challenge🎉🎉
You're solution looks great. But there are some problems to tackle first, I see people doing this mistake all the time and then run into issues and you've done the same. Don't set the height and width of the parent explicitly. Let the children decide the parents width and height. Height is a dangerous property to set. It can cause many problems to your site. You've set height and width to your
.container
. If you need to set a width on something than I prefer you should usemax-width
. Only if something is really simple enough that will never cause any problems whatsoever than you can consider usingwidth
. But always try to avoid usingheight
.There are some properties that is making your entire page to overflow. In the mobile view the entire form and all the texts are overflowing the page, so is on the desktop. Tweak with font-sizes and add different colors of border to different elements of the page to find out the real culprit that is causing the overflow. And then fix the overflow issue.
I hope this was helpful for you👍👍
Have a good day🙂🙂
Marked as helpful0 - @Andigashi1Posted 11 months ago
Hey there regarding the solution, the form works as intented and its well designed however there is a problem. You put the bg image in the .container instead of body and that leads to the image not applying to the entire body but only to the containers width instead. Put both the bg image and bg color at the body and you'll have a perfect solution. Great job otherwise!
Marked as helpful0
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