Help with Responsive Layout for Survey Form


I am re-doing the survey form project I already completed because I noticed that using chrome developer tools it was not responsive at all

I tested if this new version of my survey form was 100% responsive with developer tools on the 4 browsers I have on my pc: Chrome, Mozilla, Edge, and Internet Explorer

All good on almost all devices (rotated the devices too) except Samsung Galaxy Fold that in vertical the 1st <fieldset> is not aligned in the center, same for the <button>

when I view my project with the rotated screen with Samsung Galaxy Fold, my project looks good though

I attached screenshot of this issue, how do I fix it?
Also there are slight lines between different <div> that contain different <fieldset>
I want the <form> to look united throughout, “border: 0;” doesn’t work

my HTML code:

<!DOCTYPE html>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- header -->
        <h1 id="title">freeCodeCamp Survey Form</h1>
        <p id="description"><em>Thank you for taking the time to help us improve the platform</em></p>
<!--survey form -->
    <div id="first-fieldset-container">
      <form id="survey-form" action="">
        <div id="center"><fieldset id="first-fieldset">
          <label id="name-label">Name<input type="text" id="name" required placeholder="enter your name"></label>
          <label id="email-label">Email<input type="email" id="email" required placeholder="enter your email"></label>
          <label id="number-label">Age <p class="smallerfont"> (optional)</p>
            <input type="number" id="number" placeholder="age" min="1" max="99"/></label>
          <label>Which option best describes your current role?</label>
          <select id="dropdown">
            <option value="">Select current role</option>
            <option value="1">Full Time Job</option>
            <option value="2">Full Time Learner</option>
          <label>Would you recommend freeCodeCamp to a friend?</label>
          <label><input class="inline" type="radio" name="marketing" value="definitely"> Definitely</label>
          <label><input class="inline" type="radio" name="marketing" value="maybe"> Maybe</label>
          What would you like to see improved?
          </label> <p class="smallerfont">(check all that apply)</p>
            <input class="inline" type="checkbox" value="front-end-projects"/> Front-end Projects
            <input class="inline" type="checkbox" value="back-end-projects"/> Back-end Projects  
            <input class="inline" type="checkbox" value="data-visualization"/> Data Visualization
        <fieldset id="textarea-fieldset">
          <label>Any comments or suggestions?
          <textarea rows="5" cols="5" placeholder="Enter your comment here..."></textarea>
        <button type="submit" id="submit">Submit</button>
        <p id="space-below-button">&nbsp;</p>

My CSS code:

* {
    font-family: Tahoma;
    font-size: 18px;
    margin-top: 1rem; 

input , select , button {
    display: block;

input[type="radio"], input[type="checkbox"] {
    display: inline-block;

button {
    background-color: #FFE898;
    color: #F65A83;
    font-family: Tahoma;
    border: 0;
    height: 2.5em;
    width: 15em;
    display: block;
    font-size: 1.1rem;
    margin: 0.5em auto 2em;

h1 , p {
  text-align: center;

h1 {
    padding-top: 3rem;

body {
  color: white;
  background-image: url(;
  background-size: cover;

input {
  margin:  0 auto;

input[type="number"] {
    width: 4rem;
    height: 3rem;
    margin-left: 0.2rem;

.smallerfont {
  margin: 1 auto;
  font-style: italic;

label {
  display: block;
  margin: 0.5rem 0;

form {
  margin: 0 auto;
  width: 1.5rem;
  max-width: 500px;
  min-width: 300px;

fieldset {
  width: 12rem;
  border: 0;
  box-sizing: border-box;
  margin: 0 auto;
  background-color: #F65A83;
  display: block;

#description {
  padding-bottom: 1rem;

div:first-of-type {
  margin-bottom: -1rem;

input, textarea, select {
  width: 100%;

.inline {
    width: unset;
    margin: 1 0 0.5em 0;
    vertical-align: middle;

input , textarea {
  border: 1px;
  min-height: 2em;

select {
  border: 1px solid;
  min-height: 2em;

#textarea-fieldset {
    margin-bottom: 1rem;

div {
  margin: 0 auto;
  max-width: 1000px;
  background-color: #FF87B2;
  padding-bottom: 0;

#space-below-button {
    margin-bottom: 2rem;

If you have already completed and passed the tests for this project,
but have not finished the ‘Responsive Web Design Certification’ course I would advise you to move to the next part of the course, and come back to this project later.
(Understanding the box model and learning flexbox could be useful for this project)

I encourage you to keep trying out multiple browsers.
I think you would benefit from getting to know your browsers dev tools.
To open them:

  • right click an element in the browser
  • click ‘inspect’

Here you will be able to see what default styles the browser is adding to your project.

I already did check with dev tools on Chrome, Mozilla, Edge and Internet Explorer

I finished the Responsive Layout Certification last summer but I came back to it now as I did not understand many concepts and I realized the projects I did on my own were not responsive (I noticed it when I used chrome dev tools)

I need to fix this issue of one of the fieldset and the button getting out of the div in the Galaxy Fold width x height. can you help me?

I’m not sure that it is Chrome itself causing the issue.

I didn’t have Google Chrome on my device so this was a fresh install.

Step 78, build a coffee menu. Theres no submit button - HTML-CSS - The freeCodeCamp Forum

Thanks for testing it out on your end as well

on my pc I get different type of Galaxy Fold with the following dimensions:
width: 280 px
height: 653px

While your galaxy fold dimensions are:
width: 400px
height: 763px

Do you know why we get different screen dimensions of the same device to test websites on?

I can’t even modify the screen dimensions of this galaxy fold as yours

Have been thinking about your alignment problem.

Edge cases are always going to come up. I don’t think there is a one fix all solution.

However… I did manage to find a solution…

Not wanting to rob you of the feeling of solving this unless I really have to.
I’d rather wait until you’ve had a change to solve it yourself before I give my solution.

Your problem is in the ‘form’ element.

Try commenting out the form element styles, to see how it responds.
Then take a good look at what styles you have on your form that could be causing issues with the width of a 280px device.

I think you can find a solution, perhaps a better one than mine.
Please let me know how it goes :smiley:

I tend to make a mess with the stylesheet, sometimes I put contradicting styles and forget about them

galaxy fold size is not 280px wide (no galaxy fold model has this width ) not sure why it is put on browser dev tools like this

I have logic errors all the time.
Easy to ignore coding practices when prototyping
All my files are a mess, its why I’m getting comfortable with debugging and refactoring :confused:

I think its amazing that you polished this project :smiley:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.