Customize search bar size in TwentyTwentyOne (Wordpress)-CodePudding

I placed the search bar in the header by adding the string in child Theme:

get_search_form ();

I wish the bar was shorter and aligned to the right. I tried unsuccessfully to add the following to the stylesheet:

.search-form {
    max-width: 400px;
}

.search-form > label {
    width: 50%;

It does not work. Can someone help me?

P.S. The page is this: https://www.carifiglimiei.com/

CodePudding user response：

'search-form' css class is not present in your website page. Also

get_search_form ();

returns different structure than your current page html. I guess your search form is generated by any plugin. Or feel free to share the search form code.

I used this function and found this code structure (manually added a wrapper class: search-form-wrapper)

CodePudding user response：

As someone said above. Your search form is generated by some plugin and has no class search-form. From what I can see you should use class gsc-search-box as for editing in CSS. I tried to use this class and It worked. Hope I helped you :)