How to Align the Search Button in Divi Engine Filter: A Simple CSS Snippet

Easy

CSS

Machine, BodyCommerce, Ajax Filter

Details

This code snippet provides a quick and easy guide to aligning the Search button in the Divi Engine Filter post module using CSS. While this post do not cover everything, this will get you going in the right direction and is perfect for Divi users who want to make their Filter module more visually appealing by aligning the Search button to the right.

Snippets Demo

Code

1

Description:
Step 1: In the Advanced Tab of the Filter Post module, add the CSS class search_button_aligned.

Language: CSS

Where to add: Divi Module Advanced Tab

                        search_button_aligned
                    
2

Description:
Step 2: Insert the following CSS code into the Theme Options > Custom CSS section of your website.

Language: CSS

Where to add: Divi Theme Options

                        .search_button_aligned div#divi_filter {
    display: flex;
    gap: 20px;
}
 .search_button_aligned #divi_filter > form {
    flex-grow: 1;
}
.search_button_aligned #divi_filter > form input {
    margin-top:0;
}
                    

Related Snippets

Explore more from Divi Engine