Single Line Elementor Forms
Building Better MyListing Websites. One Code Snippet at a Time.
Overview
The Single Line Elementor Forms code snippet helps to style forms where all elements (fields, buttons, etc.) are on one line.
This overall snippet also includes a bonus snippet for fixing field border-radius issues that comes with Elementor Pro forms. The form at the bottom of Starter Site 4’s Blog Page, which is an example of this type of form.
Implementation
Snippet Type: CSS
- Grab the code snippet.
- Follow the instructions.
- Save your changes.
//// INSTRUCTIONS:
//// Use a plugin like WPCodeBox to add this as code snippet to your website.
//// WPCodeBox Guide and Discount: 🔥 https://mylisting.club/wpcodebox 🔥
----------------- CODE SNIPPET IS BELOW THIS LINE - REMOVE THIS LINE AND ABOVE -----------------
/**** ELEMENTOR FORMS ****/
/** FORM FIELD RADIUS AND PADDING FIX **/
.elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper) {
border-radius: 25px !important;
}
/** SINGLE LINE FORMS **/
#single-line-form-button {
margin-left: -50px;
z-index: 100;
}
@media only screen and (max-width: 768px) {
#single-line-form-button {
margin-left: -45px;
}
}
@media only screen and (max-width: 414px) {
#single-line-form-button {
margin-left: 0px;
margin-top: 5px;
}
}
@media only screen and (max-width: 414px) {
.elementor-widget-form .elementor-field-group .elementor-field {
text-align: center !important;
}
}