How Do I Center Align Mailchimp Form On Specific Page?

Store Design
,
1

Hi there! I am having some trouble trying to center this page on my Shopify store. Would anyone have some input as to how to center align the mail form? This is currently what I am seeing but I would like it to be center to the page.

image.png
image.png1900Ă—687 35.9 KB

The link to the page is https://pekoproduce.com/pages/black-friday-early-access?_pos=1&_sid=f0aa5412b&_ss=r

Thank you!

1 Like
2

Hello @williamk0601 :waving_hand:

You can paste this code snippet in your main theme CSS file (theme.css, or theme.css.liquid) and it should work

#mc_embed_signup {
    margin: auto;
}

Screenshot 2022-11-03 at 08.51.38.png
Screenshot 2022-11-03 at 08.51.38.png1323Ă—517 40.4 KB

Hope that helps!

3

Hi @Williamk0601

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

If you want to edit only this page, you can add my CSS to the theme.liquid file

{% if request.path= “/pages/black-friday-early-access” %}

#mc_embed_signup{margin:auto !important}

{% endif %}

PageFlyVictor_0-1667443241534.png
PageFlyVictor_0-1667443241534.png1232Ă—533 44 KB

Hope my solution works perfectly for you!

Best Regards;

PageFly

4

@williamk0601

oh sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.min.css ->paste below code at the bottom of the file.
#mc_embed_signup {margin: 0px auto !important;}
2 Likes
5

Please add below css code in bottom of assets/theme.min.css file

#mc_embed_signup {

margin: 0 auto;

}

Thank you.

6

Hello @williamk0601

Try this code: it will be helpful to you-

Go to the online Store>Theme>Edit Code>Assets>theme.min.css>Add code in this file.

#mc_embed_signup {
    margin: 0 auto !important;
}
1 Like
7

Hello @williamk0601 !

You need to remove the width from CSS as mentioned in this screenshot: https://prnt.sc/v12EoujYQ0Dy

Then it will appear exactly as you need it.

8

Thank you very much for your assistance as well as everyone that contributed! The issue is now solved.

1 Like
9

@williamk0601

its my pleasure to help us

10

It took me ages to find this solution. Thanks so much!!

11

@missjo13 ,

Your Welcome :slightly_smiling_face:

Ask for another issue…

12

Well since you asked… I actually can’t figure out how to centre align my mailchimp subscribe button. You will see it at the bottom of my homepage here: https://www.divino.com.au

The custom CSS code will overwrite it as I’ve embedded the form with a custom liquid component. I just can’t find the CSS to make this work. Any ideas?!

13

@missjo13

.clear {
    text-align: center;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

14

It worked, thanks so much!!

15

@missjo13

If the solution is useful then give a like and accept it.

1 Like