mise en forme champ “adresse”

Hi @depber

Hope you are doing fine.

You can show the address fields in the same line by changing the alignment of the address row. You can add the following custom CSS under Appearance > Customize > Additional CSS,

.forminator-ui #address-1{
	display:flex;
	align-items: flex-start;
	flex-direction: row;
        justify-content: space-between;
}

Let know if this code helps.

Kind regards

Luis

Hello, thank you for your answer.
I put the code as you indicate but it doesn’t work.
I cannot attach the screenshot of your modification in this message.
Thanks for your help

Hi @depber

I hope you are doing well.

For image, you would need to upload it and share the link.

But can you try this CSS instead?

@media only screen and (min-width: 600px) {
 .forminator-ui #address-1{
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.forminator-ui #address-1 > .forminator-row:first-child{
    grid-column: 1/ -1;
    
}

.forminator-ui #address-1 .forminator-row{
    margin-bottom: 0;
}
}

https://monosnap.com/file/rlOtRaufeZpvCxWKvanXVUSJJ4Aabe

Best Regards
Patrick Freitas

Hello, thank you for your responsiveness.
I found a solution. In fact in the “frominator” application, the additional css code is not supported. I installed the “Simple custom CSS” plugin and embedded your code in it and it works.
I don’t know why in the app the css code is not taken into account when it is registered.
THANKS

Hi @depber

I’m glad you found solution!

Let me just add a bit of additional explanation though.

My colleagues didn’t suggest adding the CSS to the Forminator directly in the first place and there is a reason for this:

– Forminator’s “custom CSS” option does work but it often requires CSS rules to be significantly adjusted to use a bit different structure/selectors than “regular” CSS
– so when we check things from “outside” to provide the code, we may not always be able to provide CSS in the form properly “understandable” for Forminator. CSS media queries may be an issue here too.

– In general the custom CSS option in Forminator is for very simple use cases and other/more complex customizations are better to be added using theme’s Custom CSS option or via child theme’s style.css file or similar way (like the plugin that you used).

Best regards,
Adam

Thank you for your answer. I understand better now. I use the “Ocean wp” theme and indeed I could have put the CSS code in the theme options.
In the meantime congratulations for the responsiveness. I really like the “forminator” plugin. I use it on all my sites.

Cordially