Submitted 11 months ago

Intro-Component-With-SignUp-Form

Gerardo Garcia•170

@GGSWEngineer

Preview site View code

This is a solution for...Intro component with sign-up form

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

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

Rajaul Islam Ratul•1,250
@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 use max-width. Only if something is really simple enough that will never cause any problems whatsoever than you can consider using width. But always try to avoid using height.

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 helpful
0
Andi Gashi•410
@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 helpful
0

Please log in to post a comment

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