Introduction:

In this guide, we’ll be detailing how to rearrange the positions of two custom fields using Custom CSS in the Digioh editor. The provided CSS will move the ep2_form_input_custom1_wrapper field above the ep2_form_input_phone_wrapper field.

Step-by-step Guide:

1. Understanding the CSS Code:

Here’s the CSS code we’ll be implementing:

<style>
#ep2_form_input_phone_wrapper {
    float: left !important;
    margin-top: 110px;
}

#ep2_form_input_custom1_wrapper {
    float: left !important;
    margin-top: -110px;
}
</style>

Explanation:

• float: left !important;: This will move the field to the left-most position inside its container. The !important ensures this rule overrides any other potentially conflicting float styles.
• margin-top: 110px;: For the phone field, this pushes the field down by 110 pixels from its initial position.
• margin-top: -110px;: For the custom1 field, this pulls the field upwards by 110 pixels, effectively positioning it above the phone field.

2. Implementing the CSS in the Digioh Editor:

1. Open your Digioh account and navigate to the desired form or page you wish to edit.
2. Look for the HTML section within the Digioh editor.
3. Insert the aforementioned CSS code into this HTML section.
4. Commit and save your changes.

3. Verifying the Changes:

Post the integration of the CSS, initiate a preview of your form or page in Digioh. Validate that:

• The ep2_form_input_phone_wrapper field is positioned lower by 110 pixels.
• The ep2_form_input_custom1_wrapper field appears right above the phone field due to its negative top margin.

4. Potential Adjustments:

If the results aren’t aligned with your expectations:

• Tweak the margin-top values for further refinement.
• To realign fields differently (like to the right), modify the float attribute to right.

Conclusion:

Harnessing the capabilities of Custom CSS in the Digioh editor allows for detailed customization of element positions. By comprehending properties such as float and margin-top, you can craft specific layouts tailored to your needs. Always conduct thorough tests across different devices and browsers to guarantee a uniform display.