[Resolved] Search box customization mobile

[Manuela]

Hello,

On mobile, the Search button appears right underneath the Search box. I would like a small space to be between the search box and the search button. Could you help with that?

Thank you,

[David]

Hi there,

would it be better to have the Search Field and Button stacked on desktop and mobile – so it matches the Subscribe form ? It will make it easier to maintain its responsive behaviour. Let me know.

[Manuela]

Hi,

Yes, I think that would be better.

[David]

Try this CSS:

.wp-block-search .wp-block-search__input,
.wp-block-search .wp-block-search__button {
  flex: 1 0 100%;
    max-width: unset;
  margin-left: 0;
}
.wp-block-search .wp-block-search__input {
  margin-bottom: 10px;
}

You have some empty container blocks above it inside the same column That need to be removed. Then you just need to add some container padding to match the subscribe column.

[Manuela]

Hello,

Great support as always!

Kind regards,

[David]

Glad to be of help!

[Author]

Posts