SOLVED

Need help styling a form

Go to solution
Anonymous
Not applicable

Need help styling a form

Hello,

I would love some help styling this form! I don't have strong feelings on what it should look like as long as it looks professional.

When I tried to center the form, it stretched the box even though I set the width. Any recommendations would be greatly appreciated!

Screen Shot 2017-08-15 at 4.51.34 PM.png

Screen Shot 2017-08-15 at 4.38.21 PM.png

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Need help styling a form

That's not valid CSS; float: center is not a thing.  Generally to center the width'd form within a container, use

.mktoForm {

  margin-left: auto;

  margin-right: auto;

}

Can you point to your actual URL?

View solution in original post

4 REPLIES 4
SanfordWhiteman
Level 10 - Community Moderator

Re: Need help styling a form

Kinda seems like bespoke form design should be under Job Opportunities as opposed to the peer support places.

Anonymous
Not applicable

Re: Need help styling a form

Sorry! I should been more specific. I'm trying to center the form, but the entire form stretches out when I try to center it. I need to know how to center it, while maintaining the width. 

FROM THE LANDING PAGE

#MainForm {

  margin:15px 0px 10px 0px;

  float:center;

  padding:55px 10px 25px 10px;

  background-color:#7ac5cc;

  border:double 4px #252126;

  width:40%;

}

FORM CSS

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {

  width:100%;

}

.mktoField {

width:100%;

}

#MainForm {

  float:center;

}

{

  height: 54px;

  line-height:1.5em;

  text-align: center;

  font-size: 24px;

  font-weight: 600;

  color:#000;

  border:1px solid #aeb0b6;

  padding:0.2em 0.3em;

  box-shadow:inset 1px 1px 4px 1px #ddd;

}

SanfordWhiteman
Level 10 - Community Moderator

Re: Need help styling a form

That's not valid CSS; float: center is not a thing.  Generally to center the width'd form within a container, use

.mktoForm {

  margin-left: auto;

  margin-right: auto;

}

Can you point to your actual URL?

View solution in original post

Anonymous
Not applicable

Re: Need help styling a form

Gotcha- I pulled "float: center " from a stack overflow discussion.

Your suggestion worked perfectly though, thank you!