"Close" button in the search bar (Mobile)

Store Design
, , , , ,

Topic summary

A user encountered a display issue on mobile where the “Fechar” (Close) button text in the search bar was truncated and not fully visible. They provided screenshots comparing their store to another that displayed correctly.

Initial Solutions Provided:

  • First suggestion: CSS code targeting .search-bar__close-button with fixed width of 82px
  • Second suggestion: Adjusting .search-bar__top-wrapper with column-gap and button width of 25%

Refinement:
The user requested an adjustment to prevent the search bar itself from changing width. The solution was updated to target specifically .header__search-bar-wrapper.is-visible.is-fixed with the same column-gap and button width properties.

Resolution:
The issue was successfully resolved with the refined CSS code. The user confirmed the fix worked correctly and thanked the helpers.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi, ?

I have a problem with the “Fechar” (Close) button in the search bar, where the word doesn’t appear in full, and this is only on mobile, here’s a screenshot:

Screenshot_20240613-100213-463.png
Screenshot_20240613-100213-463.png1080×2201 138 KB

And here’s another print from another store that I used as a comparison, this other store is spot on:

Screenshot_20240613-100404-024.png
Screenshot_20240613-100404-024.png1080×1811 20.6 KB

I wanted the “Close” button to look like another store I used as a comparison, how do I do that?

My website: tudoconexao.com

Comparative website: importego.com

In short, I want to make this button the same as another store I compared

2

@Dawenn paste code in theme.css

@media only screen and (max-width: 768px) {
button.search-bar__close-button {
    width: 82px !important;
}
}
1 Like
3

Add this code in your theme.css file:

.search-bar__top-wrapper {
  column-gap: 4%;
}
.search-bar__top-wrapper button.search-bar__close-button.hidden-tablet-and-up {
  width: 25% !important;
}

Result:

header-search-gap.PNG
header-search-gap.PNG492×110 9.48 KB

1 Like
4

It was good, but if you could not change the bar in this part, it would be better:

Captura de tela 2024-06-14 095747.png
Captura de tela 2024-06-14 095747.png232×328 64.2 KB

It would be nice if he stayed like this:

Captura de tela 2024-06-14 100030.png
Captura de tela 2024-06-14 100030.png232×333 48.9 KB

I’m sorry if I’m asking too much, I tried to fix this myself but it wasn’t quite right :sweat_smile:

@mrashid_1 @Spac-es

5

:check_mark: Updated code:

.header__search-bar-wrapper.is-visible.is-fixed .search-bar__top-wrapper {
  column-gap: 4%;
}
.header__search-bar-wrapper.is-visible.is-fixed .search-bar__top-wrapper button.search-bar__close-button.hidden-tablet-and-up {
  width: 25% !important;
}
1 Like
6

Thank you very much, you helped me a lot! ? :grin:

1 Like