I’m using the SiteOrigin North Theme, and I’m having trouble modifying the font size of the input text for my Contact Form 7 CSS code. I created a contact page on my website, and added the shortcode for my Contact Form 7 within a SiteOrigin Editor widget within a row. In the Attributes section of the widget, I added CSS code to modify the text font, font size, and form width, but the code is not enacting all of the changes — the input text is still very small, and is the font “Droid Serif, sans-serif”.
I need the input text to be font-family ‘Libre Baskerville’, font size 15. How do I make that happen?
Here is the webpage: femtech.co/contact
This is the CSS code I’m using in the attributes field.
.wpcf7-form input, .wpcf7-form textarea {
font-size: 15px;
color: #000000;
width: 80%;
}
.wpcf7-form textarea {
font-size: 15px;
color: #000000;
}
.wpcf7-form p{
font-size : 15px;
color: #000000;
}
Thank you,
Alison
Hi Alison
Thanks for reaching out.
The make up of the fields in the Attributes section mean that it isn’t possible to insert CSS rules in the way you’ve tried to. If you’re interested, I’ve had a go at explaining Attribute fields and their output positions here: Thread: How do Page Builder row attributes work – row class, cell class and CSS styles.
In this instance you could just trying using Custom CSS and applying these rules site wide. If you don’t yet have a Custom CSS plugin installed, go to PluginsAdd New and search for SiteOrigin CSS. Then, go to Appearance > Custom CSS and insert:
.wpcf7-form input, .wpcf7-form textarea { font-size: 15px; color: #000000; width: 80%; } .wpcf7-form textarea { font-size: 15px; color: #000000; } .wpcf7-form p{ font-size : 15px; color: #000000; }Let us know how that goes.