changing size of search box for mobiles

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/

Thanks Leo,

Does not work :(

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

Any suggestion more?

Thanks

RMR

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.

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

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.

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.

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?

Oh yeah !

Now it's better !

Thanks a lot !

RMR

You're welcome!