Opened 2 years ago
Last modified 2 years ago
#52551 new enhancement
Twenty Twenty-One: Search box alignment
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | minor | Version: | 5.7 |
Component: | Bundled Theme | Keywords: | has-screenshots needs-testing needs-refresh |
Focuses: | css | Cc: |
Description
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.
Attachments (2)
Change History (6)
Note: See
TracTickets for help on using
tickets.
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