Question Search Form element has a 1.618 em margin-bottom

[Yluky]

Hi, it seems that the element Search Form has a 1.618 em margin-bottom, so I can not get it centered vertically as the rest of elements. See attached. Using Elementor Pro and Storefront theme.
Thank you!

 

[Koni Kodes]

Try to edit the form in Elementor.

At the Advance Tab, go down to Custom CSS.
When it opens, enter this code:

.elemental-search-form {
margin-bottom: 0;
}

elemental-search-form is the class that holds the bottom margin code, so this should change it once you have saved the form again.

 

[Yluky]

Hi Koni, thank you for your answer. The code should be "elementor" not "elemental". The rest is fine:

.elementor-search-form {
margin-bottom: 0;
}

But, that code applies to all search forms appearing, and not only to just the one I want. I know that usually we need only one search form, but... It is another issue.

Anyway, I would like Elementor guys to check it, as I think it is a bug. Supposedly, a person without knowledge of coding should be able to center the search form using only the options given, and the mouse.

 

[Koni Kodes]

Hi Drimway - that is the problem with templates. They sometimes get stuck looking how the developer likes it and the developer forgets the user wants some control...

I would advise you take this to the Facebook Elementor Community if you want Elementor eyes on it. You can also request a feature on the git hub issues page: https://github.com/elementor/elementor/issues

 

[Yluky]

Ok, thank you Koni, I will ask in Github!

 

[Yluky]

Hi again!

It seems the problem is with Storefront theme. There is no problem with Twenty Sixteen theme, or Twenty Twenty. So it is not a problem from Elementor but from Wordpress. I am going to write to Wordpress/woocommerce guys.
Well, also I will write to Github, cause really I don't know whose "fault" is.

 

[Koni Kodes]

@Drimway I hope you get the right answers.

 

[sms-design]

But, that code applies to all search forms appearing

if you have more than one form on that page correct, so give that instance a class from the advanced tab and apply Koni solution.

In the class add koni-solution

.elementor-search-form .koni-solution{
margin-bottom: 0;
}

As Koni said each template has different spacing as you have established by changing the themes, they are all different

 

[Yluky]

if you have more than one form on that page correct, so give that instance a class from the advanced tab and apply Koni solution.

In the class add koni-solution

.elementor-search-form .koni-solution{
margin-bottom: 0;
}

As Koni said each template has different spacing as you have established by changing the themes, they are all different

Thank you, sms-design, I will try it. I have written to Storefront guys but didn't receive any answer.

 

[sms-design]

Given it's still the festive season I'm not surprised, and to be honest I would not want to tackle their support ticket backlog.