Stians survey form project

[KnitBeard]

Hi!

I’d like some feedback on my survey project. The feedback I got on the tribute project was very valuable. I really appreciate it!

I have one question: I made .submit and #textarea look centered by using width: 100%;. How do i center them for real? E.g. if wanted width: 50%;, but still wanted them centered?

Thank you!

https://cdpn.io/knitbeard/debug/ZELjoGQ/ZorBaLRQLbPM

Regards,
Stian

[hilbug]

I was playing around in your CodePen and FlexBox is probably the best way based on how you have it currently coded.

1. Consolidate the “comments” into its own div. Noticed I also changed the button and gave it a new class div-button:

<div class="comments">
  <p>Give any comments down below if you have them:</p>
  <textarea id="textarea" rows="5" cols="45"></textarea>
  <button type="submit" id="submit" class="submit div-button" form="survey-form" value="submit">Submit</button>
</div>

2. Set comments as a flex container and define how to align the child items:

.comments {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  width: 100%;
}

3. Set the widths to 50% on the child items:

#textarea {
  width: 50%;
  border-style: none;
  border-radius: 5px;
}

.submit {
  width: 50%;
  background-color: #1a1a1a;
  border: none;
  border-radius: 5px;
  /*border-width: 1px;
  border-radius: 3px;**/
  height: 40px;
  color: #fff;
  font-size: 1.2em;
}

.div-button {
/*   width: 50%; */
  margin: 20px 0px 0px 0px;
}

Let me know how that works out! ~HiL