Twenty Twenty-One: Search box alignment

[vinita29]

I was Customized theme twenty twenty-one search-box on tablet and smartphones view. here search-box text field and button are not in correct alignment.

[poena]

Hi!

I think you are right that this margin can be safely removed from the search input field.

This margin was added to the input elements to give room for the focus outline, but the search input field has a negative outline offset and the margin is not needed there.

Twenty Twenty-One uses sass, the change needs to be made to the .scss file.

The margin is added here:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss#L21

And I suggest adjusting it for the search input here:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss#L41

[vinita29]

Hi @poena

Exactly, there is no need of margin for search input field. this margin can be safely removed from the search input field. You did Excellent!!