[Support request] Newsletter Element

[Ash]

I have recreated everything now with GB moving from Kadence. One thing I can’t get to look right is our newsletter element.

I need the form to be inline. And for the icon, headline & form to align correctly.

[David]

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.

[Ash]

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.

[David]

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

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

[Ash]

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.

[David]

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.

[Author]

Posts