# My First Survey Page

**URL:** <https://forum.freecodecamp.org/t/my-first-survey-page/215561>\
**Category:** I Built This\
**Created:** [August 7, 2018, 5:24pm UTC](https://forum.freecodecamp.org/t/my-first-survey-page/215561 "2018-08-07T17:24:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Klaudia](https://avatars.discourse-cdn.com/v4/letter/k/6bbea6/32.png) [@Klaudia](https://forum.freecodecamp.org/u/Klaudia)\
**Post date:** [August 7, 2018, 5:24pm UTC](https://forum.freecodecamp.org/t/my-first-survey-page/215561/1 "2018-08-07T17:24:08Z")

</div>

Hi guys this is my first Survey Form and I want to see it and to tell me your opinion.Is this right or not?

[https://codepen.io/klaudia97/full/qKLRGg/](https://codepen.io/klaudia97/full/qKLRGg/)

Thank you.

---

<div class="post-metadata">

**Author:** ![sorinr](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sorinr/32/87166_2.png) [@sorinr](https://forum.freecodecamp.org/u/sorinr)\
**Post date:** [August 7, 2018, 5:55pm UTC](https://forum.freecodecamp.org/t/my-first-survey-page/215561/2 "2018-08-07T17:55:03Z")

</div>

A good survey page. You just need some little changes to make the page responsive like:

```auto
#form-outer {
  background-color: rgb(250, 250, 250);
  margin: 0 auto;
  border-radius: 4px;
  width: 95%; /* to be changed in media query */
  max-width: 900px;
  padding: 10px;
  padding-top: 20px;
}
.labels {
  display: inline-block;
  text-align: left; /*to be changed in media query */
  width: 40%;
  padding: 5px;
  vertical-align: top;
  margin-top: 10px;
}

```

and then add the media query like:

```auto
@media (min-width: 576px) {
  #form-outer {
    width: 75%;
  }
  .labels {
    text-align: right;
  }
}

```

The code above will make your page mobile first design.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 1:46pm UTC](https://forum.freecodecamp.org/t/my-first-survey-page/215561/3 "2021-06-01T13:46:27Z")

</div>

Closed on June 1, 2021, 1:46pm UTC