Question on Mailchimp block

I see. Can you try duplicating instead? Example: https://share.getcloudapp.com/WnuyjRn2

Kindly let us know how it goes. :)

Thanks, the problem is that I dont have the interface there, just HTML code. If i duplicate it within my Homepage, I will just have the section in there twice and still have to copy/paste the code.

https://www.screencast.com/t/exEkXRw6DPU

Ok so that code doesn't go in that kind of Element.
Create a New Element -> Block.
The Block Element comes in several flavours, the default type being Hook.

In that new Block Element, select the 3 Dot Menu -> Code Editor.
Paste in the code to text area. Then switch back to Visual Editor

Thanks, that worked :)

Quick follow up @David: I noticed that the mobile and tablet views are not looking good with my newsletter footer, especially in the tablet view:
https://www.screencast.com/t/WA24jsYFa

I see that I can set different fonts etc for those viewports, but maybe there is a quicker way to optimize things like the Subscribe button (yellow) without having to play around manually with the padding/margins? Or maybe I can set up my original code in a better way to have it displayed nicer in all devices?

You should still have the log in and I will exit the post so you can have a look for yourself.

I also wonder why the social Icons in my footer are not in the same line. They are when I am looking at them in the customize-footer section.

Thanks!

Ok the column Container with the Subscribe to Newsletter has a width of 50% and 128px left padding.
I would set the width to 40% and remove the 128px padding.

Then select the Column with the mailchimp form and set that to 60%.

Then finally the Container block that wraps that content ( the one i moved before ) give it some left and right padding, this will stop the content touching the screens sides.

That should free up some space so the button doesn't get all squished.... let us know.

Thanks, that worked. And for the mobile view, how can I set the image not to be so big? I just want it to appear as a thin stripe like it does in Desktop view. In mobile view, it looks like the full picture rather.

Also the subscribe button cant be seen in the mobile view sadly.

You will need the input field and button to stack on mobile as there isn't room for them to be inline.
Add this CSS to do that:

@media(max-width: 500px) {
    form.wp-block-getwid-mailchimp__form {
        flex-wrap: wrap;
    }
    form.wp-block-getwid-mailchimp__form .wp-block-getwid-mailchimp__submit,
    form.wp-block-getwid-mailchimp__form .wp-block-getwid-mailchimp__submit div,
    form.wp-block-getwid-mailchimp__form .wp-block-getwid-mailchimp__submit button {
        flex: 1;
        width: 100%;
    }
    form.wp-block-getwid-mailchimp__form p.wp-block-getwid-field-email {
       margin-right: 0 !important; 
    }
}

You can also select the parent Container ( the one moved earlier ) and reduce its Left and Right Padding whilst in the Mobile view to give the content more room to breath.
And do the same for the column Container that has the Form inside on Mobile, it currently has some left padding that needs to be 0 to help with its alignment.

Thanks! The second approach without CSS worked nicely I think - this is how it looks now:
https://www.screencast.com/t/3mrX8Xfo18l

From my point it looks good now, or would you tweak anything else?

Do you happen to know why the social media icons are not in line as well by any chance?

Thanks so much for your help,
really great support from you guys! =)

I would still apply the CSS as your browser viewport will probably scale down to 480px but not below. So on small mobiles you still gonna have the problem.... you may want to adjust the @media(max-width: 500px) { maybe make it 420px instead.

Social links - add this CSS to get rid of the extra margins:

.widget ul.wp-block-social-links li {
    margin-bottom: 0;
}

Ok thanks, so I will add both of these in the custom CSS code in customize. Just was wondering if the same could be put in place using the front end to keep the amount of extra code to a minimum. Im afraid over time it will get very nasty :D

That amount of CSS wont be an issue :)

There will probably be coming a lot more in the future =) ill try to mark it nicely with comments to keep track of everything. Thanks!

We can't do much about forms but if you keep most of your build inside GP and GenerateBlocks then we should be able to keep additional CSS to a minimum. As long as you don't start running into 4 - 500 lines plus then i am sure it all be fine

Glad we can be of help