Slicewp forms appear too big on the front end

Hey @vivibosslink,

Thank you for reaching out! I’ve just inspected the page you’ve shared and I believe the following CSS code should help:

body .slicewp-field-label-wrapper {line-height: 1;}
body .slicewp-field-label-wrapper label { font-size: 18px; }

body [class*="slicewp"] input {font-size: 18px; }

body .slicewp-field-wrapper textarea,
body .slicewp-field-wrapper select { font-size: 18px; }

From what I see, there are some CSS rules from your theme which make all the text on your website of font-size: 30px. This means that most of the text, if not styled directly, will inherit this value.

Also, because SliceWP includes minimal styling and allows the theme to style basic elements, the inputs and labels ended up being quite large on your site.

Please add the above CSS code to your website and let me know how it goes.

Thank you and best wishes,

Mihai

@iovamihai Thank you for your response. I used the CSS code but unfortunately, it didn’t work. Could you please look into it and see why. I will appreciate if you could help me with another code or anything that could get this to work.

Thank you!

Hey @vivibosslink,

Can you please let me know where you’ve added the code? I’ve just tested it in the browser and it worked normally.

You can try this following one, which is more aggressive than the first:

body .slicewp-field-label-wrapper { line-height: 1 !important; }
body .slicewp-field-label-wrapper label { font-size: 18px !important; }

body [class*="slicewp"] input { font-size: 18px !important; }

body .slicewp-field-wrapper textarea,
body .slicewp-field-wrapper select { font-size: 18px !important; }

I recommend you to add the above code into Appearance > Customize > Additional CSS.

Please try it out and let me know how it goes.

Thank you and best wishes,

Mihai

I added the previous code into Appearance > Customize > Additional CSS.

And it did not work.

I added the current code into Appearance > Customize > Additional CSS.

And it still didn’t work.

You can see that from the screenshot share on this links;

https://ibb.co/16T7WkX
https://ibb.co/SfKsbTP
https://ibb.co/WW5C5Ry

I’m testing this on mobile – iphone safari and chrome browser.

kindly help! Thank you.

Hey @vivibosslink,

It seems that opening square bracket from the code is outputted into its code form instead of the actual symbol.

You can check this here: https://ibb.co/vZwgv9T

In the code editor from Appearance > Customize > Additional CSS you will probably see it as as the symbol, which can be misleading.

Why the code is outputted differently in the website’s front-end, I cannot say. However, I recommend you to manually edit this line of code:

body [class*="slicewp"] input { font-size: 18px !important; }

Instead of copying it, please write manually. This, in theory, should work.

If it doesn’t, please let me know and I’ll try to find a different approach.

Thank you and best wishes,

Mihai

Hello,

@iovamihai I did as guided as you can see from this screenshot;

https://ibb.co/HgXQ4gk

Yet, it didn’t work!

I have just messaged slicewp from the contact form on your website.

I provided details on the mail, so you can take a closer look and resolve this issue.

Thank you!