Survey Form Challenge - Submit Button, Formatting Issues

Survey Form Challenge - Submit Button, Formatting Issues
0.0 0

#1

Hi Guys, my first post!

I am working through the Survey Form Challenge and encountering a problem while tidying up the look of the page.

My project: https://codepen.io/rorochaudhary/pen/ZRLzyw

Submit Button - I have my animated submit button at the bottom of my div, however, I am unable to center it.

Initially, I tried using margin: auto; with no change. position: absolute; with offsets, worked but the button is removed from within the div entirely. It appears to move using margin: 0 50% 0 50%; but within the full view, the button still does not appear centered.

The button is nested within class=“container”. on CSS, .container is styled as such:

.container{
  display: flex;
  justify-content: center;
  flex-direction: row;
}

Any advice? An explanation about the concepts behind it or topics to look up for understanding would be great. Thanks!


#2

Hello there. As I can see you have written container instead of .container since you said that container is a class. That might fix the problem. :slight_smile:


#3

Which part of your current CSS code do you think should be centering the Submit button but is not?


#4

Andrew,

I typed up the code and forgot the period in front, I double checked my CodePen and it is .container, not container.

I edited my post to be clear there.

Thanks!


#5

Randell,

My thinking is that the line:

justify-content: center;

Would center all elements within its container, including the nested button.


#6

Because your code is not indented, it may be hard to see the only element inside your div with class=“container” is the form element, so that is the only element that will be centered.


#7

Randell,

I went through and indented the code for organization, thanks. The text cursor shows that the button is nested within the form element itself, and within div class=“container” as well.


#8

Yes, but the css you wrote only applies to the direct children of the div with class=“container”, because the form itself does not have the display:flex property;


#9

Ahhh, understood! After moving it outside of the form element but within “container” it resolved. This may be a basic/fundamental question, but does the reasoning you provided apply with all CSS? Any code written affects only the direct children?


#10

Properties are inherited down through parents and apply to children (all the way down) when applicable. The key here is “when applicable”. Only elements with display:flex can inherit justify-content: center or flex-direction: row. Since the form element did not have the display:flex added to it, it did not apply.


#11

Understood. Thanks for the clarification!