Stians survey form project

Code Feedback
1

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

2

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>
  1. 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%;
}
  1. 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 :grinning:

3

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