Join our new community forum for support & discussion

Join Now

Home Support Themes ListingHive The search button for keywords

The search button for keywords

  • Author
    Posts
  • aportodas

    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

    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 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

    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 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

    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 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

    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 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.

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

You must be logged in to reply to this topic.