[Resolved] Search box problem on mobile side bar

[Sebastian]

Hi! I’m using the search block on the right side bar of my blog. On mobile version, the search bar and the button are align horizontaly with no padding between them.

Please can you provide some information to add padding between those two elements so they don’t look agglutinated.

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Sebastian]

Here you have the link of the site
Thank you!

[Leo]

This is what I’m seeing using the browser mobile simulator:
https://www.screencast.com/t/NxjrjVUVlXn8

Is that what you are seeing?

[Sebastian]

This is what I see Leo.

[Leo]

Looks like the issue is only on super small mobile screens.

Try this CSS:

@media (min-width: 330px) {
    .wp-block-search .wp-block-search__button {
        margin-left: 0px;
        margin-top: 10px
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Sebastian]

Thank you so much Leo!! It worked perfectly!

[Leo]

No problem 🙂

[Author]

Posts