Join our new community forum for support & discussion

Join Now

question

The search button for keywords

Author

Posts
aportodas 4 months, 1 week ago

The search button for keywords that I have on the home page looks great on mobile.
It occupies 2 lines, an upper one where it puts the text “keywords” and a lower one where it shows the color button with the text “search” but this word does not occupy the entire button, because the button is much wider than the word so that you see a very wide button and a narrower word.
I would like everything to appear on a single line because it takes up a very important space to occupy 2 lines. For this I see the solution that the button is narrower with the word “search” or replace the word “search” with the icon of a magnifying glass.
Thanks a lot.

aportodas 4 months, 1 week ago

I leave you the link of the web so you can see what the button looks like on the home page.

https://publimascota.com

Thanks for your interest.

yevhen 4 months, 1 week ago developer

Thanks for your feedback, we will try to improve the mobile search UX. It is possible to customize the form layout, but this requires CSS (and possible PHP) customizations.

aportodas 4 months, 1 week ago

Please couldn’t you help me how to make the button smaller or put a more discreet magnifying glass somewhere or how to make the button narrower.
Thanks a lot.
If anyone knows how I should do it I would appreciate it.
a greeting
yevhen 4 months ago developer

Please try this CSS snippet to make button narrower on mobile
```
@media only screen and (max-width: 47.99em){
    .hp-form--listing-search .hp-form--wide .hp-form__button{
        width: auto !important;
    }
    .hp-form--listing-search .hp-form__footer{
        align-items: start !important;
    }
}
```
aportodas 4 months ago

Hello I have tried to put the css code that you have sent me but it does nothing.
The button remains the same size
yevhen 4 months ago developer

Please try this CSS snippet instead
```
@media only screen and (max-width: 47.99em){
    .hp-form--listing-search .hp-form__button{
        width: auto !important;
    }
    .hp-form--listing-search .hp-form__footer{
        align-items: start !important;
    }
}
```
aportodas 4 months ago

Thanks again. I have tried the css code but it does not solve the problem. Actually I think that this problem that I raise would improve the appearance of their website for many people, because when it is opened on a mobile phone and that is 80% of the time that search button takes up a lot of space on the screen because it occupies 2 lines and also it is not clear to the user where they should write their words because they hit the search button but many people do not know that they have to write something.
on a computer it looks clearer but on a mobile phone it is misleading. Well I’m waiting if you can pass me some css or html code where I can modify this to a single line. Anyway, my in good time for the theme and plugin because it is excellent. And thanks for looking after me.

ihor 4 months ago developer

Thanks, we’ll try to improve the mobile UX with every update. If it’s urgent and you’re familiar with CSS please try customizing it by yourself or hiring someone for styling/layout customizations via Fiverr.
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.