Formloom 4 issue on mobile

[Jimmy (Jim)]

L.S.

In my Formloom 4 form I have an issue on mobile sized screens: some sentences are in a really tiny font size and almost overlap from one line to the next. See questions 2 here…

Here is the URL…

Stinger In-Depth

Anybody any idea what settings I could fix these issues with?

Thanks,

Jim

[teefers (Doug Bennett)]

You could try this:

div[class^=yd-]>div>label {
    line-height: 16px;
    font-size: 14px;
}

[Jimmy (Jim)]

Thanks! But, uh, uh, where do I stick that?

[teefers (Doug Bennett)]

It goes in the CSS code area of the page inspector.

The default now is line hgt of 10px and the font size is 12px. You should of coursce play with these values.

[Jimmy (Jim)]

Thanks again, I really appreciate your help.

However, I put in the CSS code - on the Formloom page - and republished but I do not see a change.

[teefers (Doug Bennett)]

It looks like you are using the Formloom stacks interface. Are you putting it on the stacks page or the formloom page?

You can try it in sitewide code area as well.

You might have to add the !important tag to the end of each one(but I don’t think so:

div[class^=yd-]>div>label {
    line-height: 16px!important;
    font-size: 14px!important;
}

[Jimmy (Jim)]

I put it in on the Formloom page, not in the Stacks page, for I figured it is meant for this specific form (for mobile screen sizes) only AND I was concerned that it would influence all the other content on the Stacks page if I would have put it in there.

I have the same concern about putting in the site wide area.

However, I know precious little about coding so please tell me where the CSS code should go…

Thank you.

[teefers (Doug Bennett)]

I would put it in the stacks page.

That is a very specific selector so the code would only get applied to an html label that has a parent division that has another parent division with a class that starts with with yd-.

So I doubt that it would have any effect on the rest of the page.

[Jimmy (Jim)]

I stuck the code in the Stacks page and you were right as it did not have any undue influences.

However, it also did not solve the issue in the form, not even after bringing the line height up to 20px.

Any suggestions?

[teefers (Doug Bennett)]

I just checked the link above and can not find the code anywhere in the CSS files on the published site. Not sure where you added it but I can’t find it.

Here is what it looks like w.o the code:

And when I add the code in the browser:

[Jimmy (Jim)]

I am such a n00b when it comes to coding and where to place it, so I think I put it where you suggested in the stacks page but I am not sure by any means…

Is this not correct?

[teefers (Doug Bennett)]

Looks like the right place,
I’m not finding it on the published site.

[Jimmy (Jim)]

I repasted it in and republished all pages of the site: same negative result. I emailed the developer: hopefully they have a solution. Thank you so so so much for your time and input!

[teefers (Doug Bennett)]

Hey @Jimmy,

I did some experiment with FormLoom and got it to work on a test page.

Here is the approach I used. Goto the FormLoom plugin page, there is a spot to put CSS code that will carry over to the helper stack.


And then paste the code I gave you above:

div[class^=yd-]>div>label {
    line-height: 16px;
    font-size: 14px;
}

I just did a quick test and that works. For some reason the code being placed in the stacks page is getting over-ridden.

[Jimmy (Jim)]

You absolutely, totally and utterly rule. That did it. Thank you so very much. Wonderful.