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 Patrick,
I am trying to align the Form block itself, the whole form’s alignement in the page. I would like it to be centered in the page but it doesn’t respond when I select align-center in the block settings.

Here is a screenshot:
https://monosnap.com/file/TGpJxHd0KllINqjBlrhk2g0ypRQ91z

I find the same issue in two Forminator blocks:
– in the inscriptions page
– and in the Abonement page

but not in the Contact form, and I don’t understand what is making it so that I can’t be able to align center the first two.

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 Jonathan. I tried opening the link with another browser (Chromium, instead of the usual Firefox) and they render the page very differently. In Chromium the forminator block is centered and much wider.

I can’t find the CSS responsible for that. Could you help me rectify the css so it displays centered in Firefox? (and all browsers, preferably, if that is really the issue).

Thanks
Rod

• This reply was modified 3 years, 8 months ago by rod.

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

Thanks Patrick. Indeed I had added width: -moz-max-content; in the form’s appearance settings.

But how can I otherwise make the form’s width shrink to the content’s size (or a percentage relative to the screen size) and still keep it centered? Do you know which CSS I could apply there?

(as I removed the css you mentioned, the form becomes ‘alignwide’ and so it is much wider than its content.)

Cheers,
Rod

• This reply was modified 3 years, 8 months ago by rod.

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

Hello @nomadarod ,

We haven’t heard from you for some days now, so it looks like you no longer need our assistance.

Please feel free to re-open this ticket if needed.

kind regards,
Kasia

Hi @wpmudev-support2 Kasia,
sorry for the silence. Life constraints.

Thanks for sharing that solution.

cheers
Rod

Hi @wpmudevsupport16

I applied the css in the customiser but it didn’t work for the form 283

https://delasciencealassiette.fr/inscriptions/

I don’t understand why. Maybe some conflicting CSS?

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 Nithin, thanks for coming to the rescue

I changed the css. No results.
https://monosnap.com/file/1PN01EcRXnucNt8eHSBBlaL9FIF8WO

It works with the “Abonement” and the “contact” forms, but not with the “inscriptions” form.
thanks
Rod

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

Hi Patrick,

I added the new CSS to the previous ones as you suggested.
It worked great! Thank you for being there!

Wish you a great day!
Rod