Line Height

Please make it easier for me over here by actually looking at something when I send it.

Hello @james377

Hope you’re doing well!

I apologize for the late reply. I could replicate the issue with the Field description and have notified our developers about this

To move the sign 0/50 bellow the message box, please try this CSS
.forminator-description {
right: 50%;
position: relative;
}

To center the form, please remove this custom CSS

.forminator-custom-form-16143.forminator-design--flat .forminator-input {
    width: 50% !important;
}

And this:

.forminator-custom-form-16143.forminator-design--flat .forminator-textarea {
    width: 50% !important;
}

and add this CSS code:

#forminator-module-16143 .forminator-row {
  width: 50% !important;
  margin: 0 auto !important;
}

If there any other CSS that is has set width and/or margin for inlut field, please remove it too.

Have a good day and take care.

Cheers,
Nastia

It appears that, by default, the Input and Text Area run off the form. The only custom CSS I have is this: {background-color: #9cc38e}
Or, this is a a bug. While editing another form, I was adjusting the Input and Text Area width and the results were they were running off the form (I think this was the result. It was a long time ago). Those settings, even though they’ve been deleted on that other form a long time ago, has spilled over to other forms – the new form I just made. Link below:

Web page: https://www.leesleyfilms.net/support-test/

Thanks,
JL

• This reply was modified 5 years, 5 months ago by james377.

2nd question; What’s the CSS that’ll make the form look right for the mobile version? Here’s what it looks like now: https://drive.google.com/file/d/1yN3RHSS5N4y__F0-Y31ia7h2ZXcMZniP/view?usp=drivesdk

This is the CSS I have in the form now:
{width: 40% !important;
margin: 0 auto !important;
letter-spacing: 1px;

@media screen and (max-width:500px)
width: 100% !important;
}

Thanks,
JL

• This reply was modified 5 years, 5 months ago by james377.

Please ignore the 2nd question. The new question I have is this: why is the contact form so narrow for the mobile version? Here’s what it looks like:
click here.

The custom CSS I have in there now is:
{width: 30% !important;
margin: 0 auto !important;
letter-spacing: 1px;

@media screen and (max-width:500px){
width: 100% !important;
}

Thanks,
JL

Hello @james377

Hope you are doing well!

I’m afraid I can’t locate the form on your site, it is no longer there. Based on the shared CSS code the width: 30% !important; may affecting the form width.

Have a good day and take care!

Cheers,
Nastia

When I don’t put the width at 30%, the form is across the whole page. How do I fix that without making it 30%?

Thanks,
JL
Click here for the web page.

Hello @james377

The form has a width of 30% globally, so in smaller screens like in mobile, this is becoming way too small. In order to increase this, please try the following CSS in Appearance -> Customize -> Additional CSS:

@media screen and (max-width: 480px) {
  .forminator-custom-form-15547.forminator-design--flat {
    width: 75% !important;
  }
}

Warm regards,
Dimitris

How do I center a form on a page without using columns?

Thanks,
JL

Hello @james377

Hope all is well!

I’ve visited your site and the form is centered. In any case, you can use the following CSS with the form’s CSS ID to show the form centered:

#form-ID-in-here {
margin: 0 auto !important;
}

Have a good day!

Cheers,
Nastia

Hello,
Ya, I found the CSS to center it after I sent you that message. Thanks.

Another question: please go to same page (link below). Hover over the Message (optional) text area and notice the black outline. If you inspect that element (on a Mac), the body tag is causing it at #000000. I can’t locate the CSS to remove that. Also, do you know the CSS that can lower the placeholder text in that box (Message (optional))?

Here’s the link to the page: Link.

Thank you,
JL

• This reply was modified 5 years, 4 months ago by james377.

#3) This doesn’t work for “Material” on mobile versions. Why do you have to add CSS to make this plugin work for mobile versions! Most people use mobile devices for the internet, but this plugin is not made for them.

@media screen and (max-width: 480px) {
.forminator-custom-form-15547.forminator-design–material {
width: 75% !important;
}
}

Although it’s not showing here, there ARE two dashes between the words “Design” and “material.”
https://www.leesleyfilms.net/our-current-project/apparition-alert/

• This reply was modified 5 years, 3 months ago by james377.
• This reply was modified 5 years, 3 months ago by james377.
• This reply was modified 5 years, 3 months ago by james377.

Hello @james377 ,

Another question: please go to same page (link below). Hover over the Message (optional) text area and notice the black outline. If you inspect that element (on a Mac), the body tag is causing it at #000000.

Have you fixed that issue? I’m checking your site and there is no black line there.

Also, do you know the CSS that can lower the placeholder text in that box (Message (optional))?

Please try this code:

.forminator-ui.forminator-custom-form.forminator-design--material .forminator-textarea {padding-top: 10px;}

#3) This doesn’t work for “Material” on mobile versions. Why do you have to add CSS to make this plugin work for mobile versions! Most people use mobile devices for the internet, but this plugin is not made for them.

It is not working because you already have CSS that changes its width in custom styles:

.forminator-custom-form-15547.forminator-design--material {
    width: 35% !important; }

If that code needs to be applied only for resolution higher than mobile then you can try wrapping it into media query as well, like this:

@media screen and (min-width: 480px) {
.forminator-custom-form-15547.forminator-design--material {
    width: 35% !important; }
}

kind regards,
Kasia

Hello,
I’ve replied with a video. It’s on my Google Drive:
https://drive.google.com/open?id=10XZkB34_SDdkvEYWeZJjoh-f9JyMV1xL

Hello @james377 ,

So I have watched your video with your feedback. I think there is some confusion. As you said this part you already have in code doesn’t work:

@media screen and (max-width: 480px) {
.forminator-custom-form-15547.forminator-design–material {
width: 75% !important;
}
}

and then you said that I have sent you the same code to use. Please note that this is code I have sent:

@media screen and (min-width: 480px) {
.forminator-custom-form-15547.forminator-design--material {
    width: 35% !important; }
}

Please spot the differences between your code and mine:

(max-width: 480px)

is not the same as

(min-width: 480px)

and

width: 75% !important;

is not the same as

width: 35% !important;

So both codes are affecting the different resolution of the screen and then making different width of the form depending on it.

You said that you don’t have this code on your site:

.forminator-custom-form-15547.forminator-design--material {
    width: 35% !important; }

But when I check your site I can see it, please see attached image:

So at some point, it had to be added somewhere in styles and now it is overriding new query you want to add. So the solution would be to change that code that makes form 35% of width to be applied to a resolution that is higher than than the mobile one and then for mobile have code that makes form 75% of the width.

Our plugin is prepared to be used on mobile, without any custom code it works, I’m attaching screenshot from my phone with example form in Forminator:

You said this code doesn’t work:

.forminator-ui.forminator-custom-form.forminator-design--material .forminator-textarea {padding-top: 10px;}

but when I checked your site I don’t see that code there – so can’t say why it is not working. If you removed it, please add it again.

kind regards,
Kasia