Make WordPress Core

Opened 3 years ago

Last modified 3 years ago

#52551 new enhancement

Twenty Twenty-One: Search box alignment

Reported by: vinita29's profile vinita29 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)

search_box.png (37.8 KB) - added by vinita29 3 years ago.
52551.patch (349 bytes) - added by vinita29 3 years ago.

Download all attachments as: .zip

Change History (6)

@vinita29
3 years ago

@vinita29
3 years ago

#1 @SergeyBiryukov
3 years ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Search box alignment on twenty twenty-one theme. to Twenty Twenty-One: Search box alignment

#2 follow-up: @poena
3 years ago

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

#3 @poena
3 years ago

  • Focuses ui administration removed
  • Keywords needs-refresh added

#4 in reply to: ↑ 2 @vinita29
3 years ago

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!!

Note: See TracTickets for help on using tickets.