[Resolved] changing size of search box for mobiles

Home Forums Support [Resolved] changing size of search box for mobiles

Home Forums Support changing size of search box for mobiles

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #331158
    rtomc

    Hy,

    I looked for a solution in this forum. I found a lot of answers to similar questions, but not found what I need…

    Only need (sic) show the search box (that I placed into a top bar) smaller because it looks very big… too big !

    You can see it in this emulator:

    http://mobiletest.me/iphone_5_emulator/?u=http://STAGING10.PRODUCTOSDEPELUQUERIA.INFO

    Then, how can I make the search box smaller, in mobile mode?

    Thanks !!

    RMR

    #331167
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    @media (max-width: 768px) {
        .widget .search-field {
            max-width: 100px;
            height: 30px;
        }
    }

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

    #331718
    rtomc

    Thanks Leo,

    Does not work 🙁

    http://mobiletest.me/iphone_5_emulator/?u=http://staging10.PRODUCTOSDEPELUQUERIA.INFO

    Any suggestion more?

    Thanks

    RMR

    #331719
    Leo
    Staff
    Customer Support

    Hmm I don’t think that site is very accurate on the mobile appearance.

    Here is what I see on my iPhone using chrome: https://s1.postimg.org/vkl6544qn/IMG_5682.png

    If you want the search widget to show, I would suggest turning Off mobile header and just use the normal header:
    https://docs.generatepress.com/article/mobile-header/

    Then that code above should work.

    Let me know.

    #331721
    rtomc

    OK Leo,

    It’s true.

    I had Mobile Header option disable because when I enable it appears two slide-out menus and I can not manage both of them correctly.

    I need only one slide-out menu but I do not know how disable one of them.

    I think that I tried all the possible combinations of settings, but without success.

    You cas see it, again, at http://mobiletest.me/iphone_5_emulator/?u=http://staging10.PRODUCTOSDEPELUQUERIA.INFO

    Thanks by any suggestion.

    RMR

    #331724
    Leo
    Staff
    Customer Support

    Just want to double check..this is the site you are referring to? https://productosdepeluqueria.info/

    If so that’s not what it actually looks like on mobile. It has one menu currently which is inserted by mega menu:
    https://s1.postimg.org/vkl6544qn/IMG_5682.png

    You should be able to see the same by using the customizer device buttons or resize your browser to smaller width instead of that website.

    #332491
    rtomc

    Thanks Leo,

    No: the web I’m sharing with you is staging10.productosdepeluqueria.info

    But yes, the main menu is a mega menu.

    I need optimize this web for mobiles devices. And I’m trying a clear and easy navegation experience.
    A search box smaller would be perfect.

    I’m not using the mobile header because it does not work fine in this project.
    Then, I put the logo in topbar area and the search box in the header widgeta area (because in other case, the logo appears under de search box).

    Then, now, I only need a search box smaller.

    I tried your css snippet but without success.

    In this context, any sggestion more?

    Thanks for all, Leo.

    Regards.

    #332493
    Leo
    Staff
    Customer Support

    Thanks for the actual link to the site.

    Edited the code above: https://generatepress.com/forums/topic/changing-size-of-search-box-for-mobiles/#post-331167

    Give it another shot?

    #332508
    rtomc

    Oh yeah !

    Now it’s better !

    Thanks a lot !

    RMR

    #332518
    Leo
    Staff
    Customer Support

    You’re welcome!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.