WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 8 months ago

#52551 new enhancement

Twenty Twenty-One: Search box alignment

Reported by: 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 8 months ago.
52551.patch (349 bytes) - added by vinita29 8 months ago.

Download all attachments as: .zip

Change History (6)

@vinita29
8 months ago

@vinita29
8 months ago

#1 @SergeyBiryukov
8 months 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
8 months 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
8 months ago

  • Focuses ui administration removed
  • Keywords needs-refresh added

#4 in reply to: ↑ 2 @vinita29
8 months 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.