Aligning Gravity Forms survey responses side by side
The Gravity Forms plugin has a nice Survey add-on that can be installed. You can align the answers of the survey side by side if you wish so they are not stacked.
They are stacked on top of each other by default and the picture below will give you an idea of that.
They are stacked on top of each other by default and the picture below will give you an idea of that.
If you wish to have the Gravity Forms survey form slightly more condensed as per the 1st question in the above example then all you need to do is a add a ready made CSS style.
The custom CSS class to add is: gf_list_inline
You can add this by editing form and adding the text to the Custom CSS class as pictured below.
Custom CSS to use with Gravity Forms on dark background
Using the Gravity Forms plugin for WordPress is a great way to build some awesome forms. I recently added some forms to a page with a dark background. I found some text hard to read. I was able to fix this by adding the below custom CSS code...
body .gfield_description {
color:#fff;
}
body .gf_step_label {
color:#fff;
font-size:20px;
font-weight:500;
line-height:1.4em;
}
body .validation_error {
color:#fff!important;
}
body .gfield_label {
color:#fff!important;
}
body .gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible {
color:#fff!important;
}
body .gfield_description {
color:#fff;
}
body .gf_step_label {
color:#fff;
font-size:20px;
font-weight:500;
line-height:1.4em;
}
body .validation_error {
color:#fff!important;
}
body .gfield_label {
color:#fff!important;
}
body .gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible {
color:#fff!important;
}
Fixing the field text color in Divi Email Optin Module
Finding that the text is white in the Divi email opt-in? Add this custom and edit with the colors you wish to use.
.et_pb_newsletter_form .et_pb_signup_custom_field_0 .input[type="checkbox"] + label {
font-family: 'Verdana',Helvetica,Arial,Lucida,sans-serif;
font-size: 10px;
color: #ffffff !important;
text-align: left;
text-shadow: 0em 0.1em 0.1em #ffffff;
}
.et_pb_newsletter_form .et_pb_signup_custom_field_0 .input[type="checkbox"] + label {
font-family: 'Verdana',Helvetica,Arial,Lucida,sans-serif;
font-size: 10px;
color: #ffffff !important;
text-align: left;
text-shadow: 0em 0.1em 0.1em #ffffff;
}
How to decrease the padding between rows in DIVI
By default, the DIVI theme by Elegant Themes has a generous amount of padding. To reduce the amount of padding globally with CSS, just add this custom CSS code below:
.et_pb_row {
padding: 0 !important;
}
.et_pb_row {
padding: 0 !important;
}
Add a background and change the font of your WordPress blockquote
In a previous post, I demonstrated how to center align your WordPress blockquote, if you are looking for some additional styling, take a look at this custom CSS:
blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
font-family: Helvetica Neue,Helvetica,sans-serif;
font-size: 22px;
color: #95a5a6;
background: #ccc;
}
blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
font-family: Helvetica Neue,Helvetica,sans-serif;
font-size: 22px;
color: #95a5a6;
background: #ccc;
}
How to center align your WordPress blockquote
With most of the content on your WordPress page or post being left aligned. Center aligning a blockquote is a great way to have them stand out.
To center align your WordPress blockquote, all you need to do is add this custom CSS code to the additional CSS box in your WordPress theme:
blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
}
To center align your WordPress blockquote, all you need to do is add this custom CSS code to the additional CSS box in your WordPress theme:
blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
}
Centering the DIVI menu on mobile only
If you would like to make menu centered on mobile only, add this css code in the custom css field of the theme options:
.et_mobile_menu li a {
text-align: center;
}
.et_mobile_menu li a {
text-align: center;
}
Subscribe to:
Posts
(Atom)
New to DIVI?
Search
Tags
Blogger
(5)
buttons
(1)
css
(3)
divi
(97)
elegant themes
(43)
extra
(8)
gravity forms
(11)
jQuery
(3)
ownCloud
(1)
ProtonMail
(3)
Reddit
(2)
responsive
(1)
tables
(1)
vanilla forums
(3)
whmcs
(3)
WooCommerce
(2)
wordpress
(40)
Top snippets
- DIVI menu text bold on hover
- How to remove the responsive functionality from Elegant Themes Exlorable
- Move secondary Menu in DIVI below the Primary Menu
- Disable pause on hover for DIVI slider module
- Disiable Mobile Menu from showing with DIVI theme
- Add Thin Colored Line Under Menu in DIVI
- How to center align the Gravity Forms submit button
- Integrating Gravity forms with DIVI
- Vertically align Divi button
- Divi menu overlaps logo when scaled down
More Dorky Sites