Padding / Spacing Issue

Resolved mwrperformance
(@mwrperformance)

4 years, 5 months ago

Im building a form out with Forminator – and its great. But im struggling with the spacing between boxes / fields , and the next Label.

What I get shown on the preview is different to the live page.

Is there a way with the CSS to manually inout PX spacing (height) between each field and the next label.

I tried in the settings using custom, but this really isnt working and the spacing is uneven across the form. Especially with sub-headings.

For example, on the page linked, the £25.00 and the paypal button are really close.

Ive tried putting HTML fields in to space the form a bit better, but im sure this isnt the right way, and I dont know what HTML to add.

Appreciate the support

Mark.

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Thread Starter mwrperformance
(@mwrperformance)

4 years, 5 months ago

I think it is most noticeable on Mobile view. Especially between “calendar” sub title and the “Booking Information”

Kris – WPMU DEV Support
(@wpmudevsupport13)

4 years, 5 months ago

Hi @mwrperformance

I hope you are doing good today.

You can control this space in edit mode of your form:
Appearance -> Form Container -> Spacing -> Custom

Or with CSS this will look like this in your case:
#forminator-module-28252 .forminator-col {padding-bottom:30px !important;}

Kind Regards,
Kris
Thread Starter mwrperformance
(@mwrperformance)

4 years, 5 months ago
Hi @wpmudevsupport13

Firstly thank you for such a quick response, really appreciated.

I tired to use this : Appearance -> Form Container -> Spacing -> Custom – But the spacing is not the same throughout the form. – Looks good on the preview, then on live site some bits have good spacing and other bits of the form are not.

That CSS also hasn’t worked for what I am trying to achieve. Or maybe Im doing it wrong. I added it to the Custom CSS field on the appearance.

See here to these 2 screenshots (desktop & Mobile) for what i’m trying to achieve:

https://drive.google.com/file/d/1YySK-xC4yjzVQG3qAQDKeq3gymD17FK5/view?usp=sharing

https://drive.google.com/file/d/1DQiklFACMjbM2Sg-SZeY_H1fMPuuBCQB/view?usp=sharing

Thanks again
M
- This reply was modified 4 years, 5 months ago by mwrperformance.
Plugin Support Patrick – WPMU DEV Support
(@wpmudevsupport12)

4 years, 5 months ago
Hi @mwrperformance

I can see you added the CSS on wrong place: https://monosnap.com/file/JaPyDyI7WUExtylJkXqwER8C7dj2I1

On that specific place is for CSS class, for example, you could use custom-padding and then in the Forminator > Form > Appareance > Custom CSS
```
.custom-padding{
padding: 20px;
}
```
However, to manage the wished behaviour we need some different rules:
```
/** Booking Deposit title **/
#forminator-module-28252 #section-1{
    margin-bottom: 20px;
}

/** Booking Details & Requests title **/

#forminator-module-28252 #textarea-1 label{
    margin: 10px 0;
}

/** Booking Details & Requests textarea **/

#forminator-module-28252 #textarea-1 textarea{
    margin-bottom: 20px
}
```
Feel free to play around with values.

https://monosnap.com/file/rxIgFnS8uwM8YmYycT3kNC1o6EUzi0

Please, add it to Forminator > Form > Appareance > Custom CSS or WordPress > Appearance > Customiser > Additional CSS.

Let us know the result you got.
Best Regards
Patrick Freitas
Plugin Support Amin – WPMU DEV Support
(@wpmudev-support2)

4 years, 4 months ago

Hello @mwrperformance ,

We haven’t heard from you for several days now, so it looks like you don’t have more questions for us.

Feel free to re-open this ticket if needed.

Kind regards
Kasia

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Padding / Spacing Issue’ is closed to new replies.

Tags