Newsletter Element

Hi there,

try this CSS:

.mailster-form-fields {
    display: flex;
    align-items: center;
}

.mailster-form .mailster-wrapper {
    margin: 0;
}

You can then adjust vertical and horizontal alignment of the GB Grid Container.

Thanks, only thing is form has gone smaller.

I have tried so many different alignment settings in the grids and containers just can't seem to get it to align correcly.

You can add this CSS rule to force the email field to fill the available space:

.mailster-wrapper.mailster-email-wrapper {
    flex: 1;
}

Excellent David, thank you.

No idea why it wont align. Have all containters to horizontal align center. Tried everything that I can see. And it looks terrible on smaller devices.

So theres some bottom margin on the form - which can be removed with this CSS:

.mailster-form {
    margin-bottom: 0 !important;
}

On real small screens you could add this to make the field/button stack:

@media (max-width: 600px) {
    .mailster-form-fields {
        flex-wrap: wrap;
    }

    .mailster-form .mailster-wrapper.mailster-email-wrapper,
    .mailster-form .mailster-wrapper {
        flex: 1 0 100%;
        margin-bottom: 10px;
    }

    .mailster-form input {
        width: 100%;
    }
}

Then it just looks like you need to give the Grid Container blocks padding to put some space around the field on mobile.