Off-center form

sarahpeller · June 2019

Hi there…

I am working on this site: http://50.116.82.245/~fruitio7/maestrale2/

In the footer, I have a little Mailchimp for WordPress form I’m trying to include in the box on the right. I can’t get it to center. I tried adding

[mc4wp_form id=’2514′]

or

[mc4wp_form id=’2514′]

but neither of them work. Any ideas here?

Pablo · July 2019

Hi,

Please make a <div> for every footer tab and insert the text-align:center value there in your inlined style.

I mean, <div style="text-align:center:"> CONTENT </div>

Also, I suggest to use 1/3 1/3 1/3 layout of Footer in this case.

I hope it will help you

Thanks

sarahpeller · July 2019

Thanks. I tried this. In footer 2, I wrote:

<h4>Join Our Mailing List</h4>

[mc4wp_form id="2514"]<br><br>

Hear about new arrivals, discounts & deals.

</div>

But the form remains un-centered...

Pablo · July 2019

It's actually centered, but your e-mail input field is short, you should make it wider, like 280px.

Can you edit that input by attaching inline css code there?

Thanks

sarahpeller · July 2019

what is the "inline css code"?

Pablo · July 2019

It's a CSS code which is inserted straight in the HTML code.

See example here:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_inline

Thanks

sarahpeller · July 2019

I'm sorry, but I'm an artist, not a coder, so this is like greek to me...

where exactly would I go to change the length of my email input field and what exactly would I type to do this?

thanks so much

Pablo · July 2019

You should edit it in the settings of the form.

Exactly, in the Mailchimp settings of the content.

Mailchimp for WP > Form

http://prntscr.com/oafb8t

Thanks

sarahpeller · July 2019

Yes! That helped a lot! Thanks for the specific instructions. Do you know if there is a way to change the color of the "sign up" button? I don't want to change it globally though...

Pablo · July 2019

In the same way.

Just insert the inline code with background-color tag.

https://www.w3schools.com/css/css_background.asp

Thanks

sarahpeller · July 2019

thanks. the form is still misaligned on mobile. If you view the site on a phone, you'll see that it still won't center...?

Pablo · July 2019

This is CSS problem, not the theme.

I told you, to change it to 280px, that's right - to make it responsive.

If you would like to have it always on the center, you have to make some @media queries or change the layout of it.

I mean, the easiest way to make it always centered, is to make the text field 100% width and make that button to be below that text field.

Otherwise you have to make few @media queries which will change the width of that text field and button when certain resolution will be reached.

Also, you can remove that p tag from the form and apply the 'margin:0 auto' value in the text field

http://prntscr.com/odj7xu

Thanks

sarahpeller · July 2019

Thanks. I actually figured out how to center it.

I had to put align=center in the input line of text in the wp forms. thank you...

Off-center form

Comments