HTML form: help for width and full screen background-image

Hello,

I need your help in CSS to put the same width for all the components of my survey form.
I tried to put a width of 80% to .champs, but the last two (country and jobs) are smaller than the rest (name, email and age). I don’t understand why. :exploding_head:
My code below.

HTML:

<form id="survey-form" method="post" action="#">
        <div class="survey-form__1">
          <div class="border-box">
            <p>
              <label for="name" id="name-label">Name</label><br /> 
              <input class="champs" type="text" name="name" id="name" placeholder="Enter your beautiful name" maxlength="20" required />
            </p>

            <p>
              <label for="email" id="email-label">Email</label><br /> 
              <input class="champs" type="email" name="email" id="email" placeholder="Enter your funny email" required />
            </p>

            <p>
              <label for="number" id="number-label">Age</label><br /> 
              <input class="champs" type="number" name="number" id="number" placeholder="Select your age" min="10" max="90" required />
            </p>

            <p>
              <label for="country" id="country-label">Country</label><br /> 
              <select class="champs" name="country" id="country" required>
                <option value="" selected>--- Select your country</option>
                <option value="canada">Canada</option>
                <option value="china">China</option>
                <option value="england">England</option>
                <option value="france">France</option>
                <option value="germany">Germany</option>
                <option value="italy">Italy</option>
                <option value="japan">Japan</option>
                <option value="spain">Spain</option>     
                <option value="russia">Russia</option>
                <option value="switzerland">Switzerland</option>
                <option value="united-states">United-States</option>
                <option value="other">Other</option>
              </select>
            </p>

            <p>
              <label for="job" id="job-label">Job</label><br /> 
              <select class="champs" name="job" id="job" required>
                <option value="" selected>--- Select your job</option>
                <option value="craftsmen">Craftsmen, shopkeepers, business leaders</option>
                <option value="employees">Employees</option>
                <option value="executives-professions">Executives and higher intellectual professions</option>
                <option value="farmer">Farmer</option>
                <option value="intermediary-professions">Intermediary professions</option>        
                <option value="not-determined">Not determined</option>
                <option value="retired">Retired</option>
                <option value="student">Student</option>
                <option value="workers">Workers</option>  
              </select>
            </p>
          </div>

CSS:

#survey-form{
  display: flex; 
  flex-direction: row;
  justify-content: space-between;
}

.survey-form__1{
  max-width: 40%;
  text-align: center;
}

.survey-form__1 input{
  margin-top: 5px;
  font-family: "Courier New", Verdana, sans-serif;
}

.survey-form__1 select{ 
  margin-top: 5px;
  font-family: "Courier New", Verdana, sans-serif;
  color: #9c9c9c;
}

.champs{
  width: 80%;
}

.survey-form__1 #job{
    margin-bottom: 20px;
}

.survey-form__1 label{
  font-family: 'Secular One', Verdana, sans-serif;
  margin-bottom: 10px;
}

.border-box{
  border: 0.2em solid #f4d62f;
  background-color: #f4d62f;
  box-shadow: 3px 3px 10px grey; 
  width: 100%;
}

Thanks in advance,

Manon

1 Like

Hey @manon_boiteau. Can you please share your CodePen URL? That’s more easy to check. Thanks.

Hello @paulsonstech, thanks for your answer.
My CodePen link: Survey Form .

Thank you in advance!

1 Like

Hello @manon_boiteau. I could’nt find the exact problem, but, if you just want to make all form elements to be in the same width, try this:

  • Add width: 83%; to the .survey-form__1 select{}. This will make the select input to be the same width as other input element.

Hope this helps! Happy Non-Stuck Coding!

Thanks for your answer! I tried your code but between 1024px and 705px the width of the select elements are higher than the one of the input elements.

Also, I have another issue. I just tried my code on Google Chrome with my editor, and the background-image isn’t working. The browser shows the background-image like an image an not like a background… But on CodePen, it works.

Thanks again,

1 Like

Hello @manon_boiteau. Glad to hear that your problem is solved!

For me, the width of the input elements are always equal regardless of the screen size. If that’s not the case, try using absolute units (px, etc.) instead of relative units (%, em, etc.).

I didn’t understand that. Are you saying about the little minus symbol? Is it the background-image? Please make your question more clear. A screenshot will be much appreciated.

Thanks.

I fixed both!
I don’t know why, first Chrome, display the background-image in the wrong way.

For the width I code that:

*{
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Thanks for your help,

Glad to hear that you fixed it @manon_boiteau! I couldn’t see any background image in your CodePen. Instead, I saw a minus symbol and that’s why I didn’t understand the problem.

Happy Endless Coding!

Hi @manon_boiteau, your background image is stored in your google acc’t which user’s don’t have access to so it cannot be seen.

Hello @Roma, thank you for your message!
Indeed, you are right :scream: and I already sent my project :fearful:
Do you know how can I fixed the issue? I haven’t got a Pro CodePen account, and the logo and the background-image of my survey form are only on my computer…

Thanks a lot,

It’s fine you sent your project. I wanted you to be aware that others are not seeing it the way you do.
Some places you can host images are photobucket, imagebucket or GitHub

EDIT: Let me clarify. As long as you edit the same pen, you don’t need to resubmit your project.

1 Like

Hey @manon_boiteau. For that purpose, you may need to use image hosting. The way I host images are using Google Photos.

  • Go to Google Photos and upload your images
  • Select your image and click on the share icon at the top.
  • Click on create link at the bottom of the popup that appears
  • Click on create link again
  • Copy the link and go to https://www.labnol.org/embed/google/photos/
  • Paste your link and click on Generate
  • Now copy either the link that appears or the HTML code that appears.
  • Paste your code or link in CodePen

You can use any other image hosting services also, but make sure they support web embedding.

Happy Coding!

1 Like