Center Form Instructions, Error Message, and Success Message

You’ll want to use Additional CSS under the Form CSS tab to add some custom styles. Click “Add CSS scaffolding for all access forms” to add some boilerplate CSS that you can then edit.

To center-align the form and set a width to 50% of the screen, edit the form.content-protector-access-form block to this (this should get your messages centered as well):

form.content-protector-access-form {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

Thank you.

Hi,

I tried editing the form.content-protector-access-form but it didn’t work to fix the width of the text box with your suggestion but it didn’t work. I even tried removing the spaces and even tried using 30px for width. The text box to enter the password still spans the width of the page.

Please help. Thanks.

Hi,

Try adding some styling to the content-protector-password-M element on your form (that’s your password field). Just add it in the Additional CSS textarea under the Form CSS tab

-K

Hi,

That worked!

I did add`
#content-protector-password-M {
width: 20%;
}`

to the Form CSS and it worked to shrink the box. However, It put the instructions, password box, and Submit button on the same line.

How do I have those items stacked, and centered on top of each other now?

Thanks,

Phuong