Forminator block doesn’t respond to align

Hi @nomadarod

I hope you are doing well.

Could you let us know if you are trying to align any specific content or button and we can find the best CSS for you?

Best Regards
Patrick Freitas

Hi @nomadarod,

Perhaps caching was involved with alignment not showing? I’m currently seeing them center aligned in regard to the page layout:

-https://snipboard.io/wTAosz.jpg
-https://snipboard.io/0RBTFz.jpg

Best,
Jonathan S

Hi there @nomadarod

Indeed, I too see your forms quite differently in Firefox compared to Chrome. 🙂

It looks like you have some custom CSS that is doing that. That’s either in the Custom CSS box in the form’s Appearance settings, or in your theme or the Customizer, or a CSS plugin if tat’s what you use.

.forminator-custom-form-283.forminator-design--default {
    width: -moz-max-content !important;
}

Try removing that CSS and the form should behave in Firefox as well. 🙂

Cheers!
Patrick

Hi again @nomadarod

Oh geez, I think I misunderstood your question, oops.

You want the form to be no wider than the content inside it, and have the form centered on-screen, correct?

In that case, you do want to use the max-content rule for all browsers (no need for the -moz prefix as it’s widely supported now), and add an auto margin to center it, like so:

.forminator-custom-form-283.forminator-design--default {
    width: max-content !important;
    margin: 0 auto !important;
}

The above CSS would apply to only that form though (form-283). If you want it to apply to all forms with the default style, you could use this instead:

.forminator-ui.forminator-custom-form[data-design="default"] {
    width: max-content !important;
    margin: 0 auto !important;
}

Cheers!
Patrick

Hi @nomadarod,

When I check on my side, it seems like only the following CSS is needed instead of the previous CSS given:

.forminator-custom-form-283.forminator-design--default {
    margin: 0 auto !important;
}

Is it possible to share a full-page screenshot of how the form loads on your side so that we could better state what isn’t working for you?

Since the alignment can vary from one screen size to another, we’ll need to have a better idea of how it loads on your side to better state what exactly is the issue.

Looking forward to your response, so that we could help get you sorted asap.

Kind Regards,
Nithin

Hi @nomadarod

I hope you are doing well.

I suggest a different approach, can you please add this CSS?

.page-id-243 .forminator-custom-form-283.forminator-design--default{
    width: initial !important;
}

.page-id-243 .entry-content > div + div{
    max-width: 800px !important;
}

https://monosnap.com/file/JjXwLhWv9dukcuomrs10vPTUanvQIp

Keep the ones added before and add the new one as an additional.

This should cover all media screen sizes.

Let us know the result you got.
Best Regards
Patrick Freitas