How / where to center a Mailjet subscription widget (iframe code)?

[Chikashi]

The Mailjet subscription widget is in iframe form. I tried inserting it by adding a custom liquid section: Theme -> Customize -> Homepage -> add section -> Custom Liquid

The form displays fine in mobile but in desktop, it aligns to the left. I would like it to display centred. 

I should be grateful for any suggestions.

URL: https://erie-eu.myshopify.com/

Theme: Dawn

[GemPages · Accepted solution]

Hello @Chikashi ,

It's GemPages support team and glad to support you today.

I would like to give you a recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
#shopify-section-template--16858807304483__29b84e33-a468-4ac3-9046-10ce0ae715f7 iframe#iFrameResizer0 {
  max-width: 600px;
  display: block;
  margin: 0 auto;
}
</style>

For example,

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[GemPages · Accepted solution]

Hello @Chikashi ,

It's GemPages support team and glad to support you today.

I would like to give you a recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
#shopify-section-template--16858807304483__29b84e33-a468-4ac3-9046-10ce0ae715f7 iframe#iFrameResizer0 {
  max-width: 600px;
  display: block;
  margin: 0 auto;
}
</style>

For example,

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[Chikashi]

Thank you very much for your swift and helpful suggestion. It worked like a charm for the homepage. 

The widget will be placed on other pages (templates) too. How would I apply the same?

[GemPages · Accepted solution]

Hello @Chikashi ,

You can inspect the code by pressing F12 or clicking the right mouse. After that, let's copy the ID of the section and add it to the below code:

<style>
#section_ID iframe#iFrameResizer0 {
  max-width: 600px;
  display: block;
  margin: 0 auto;
}
</style>

You can watch this video for the details: https://www.loom.com/share/48454666ba7a4a39ab31290a55276b83

Best regards,
GemPages Support Team

[Chikashi]

Sorted! Many thanks for your help. Much appreciated.

[GemPages]

Hello @Chikashi ,

I do appreciate your compliment!
Your kind words have just made my day.

Best regards,
GemPages Support Team