Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Contact form using HTML and CSS

@Zuwaynib

Desktop design screenshot for the Contact form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What specific areas of your project would you like help with?

I would appreciate help with the desktop design, how to make the label elements (eg first name and last name) appear on the same line

Community feedback

Lemnsa 110

@Lemnsa

Posted

Congratulations :) on completing this task @Zuwaynib

Sure let's sort things out

You could separate the two input fields (label with the input) in a container (it can be a div)

Like so:

<div class="container">
            <label for="firstinput">firstinput <br>
                <input type="text" name="name" id="name">
            </label>
            <label for="second-input">second-input <br>
                <input type="text" name="name" id="name">
            </label>
    </div>

But we want to make things under control, so we use CSS to give the children elements in the parent(div) a display: flex

Doing so:

  • The child elements spacing, positions could be adjusted with gap , justify-content or align-items depending on you.

Here's a sample CSS

I am using embedded CSS

 

@Zuwaynib hope this helps, and incase you are not still grabbing it refer to your learning materials and it get things done!

0

@Zuwaynib

Posted

@Lemnsa

I appreciate your help. I have been able to fix the issues.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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