- This topic has 9 replies, 2 voices, and was last updated 6 years, 9 months ago by Leo.
-
AuthorPosts
-
June 9, 2017 at 10:40 am #331158rtomc
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
June 9, 2017 at 10:49 am #331167LeoStaffCustomer SupportHi 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/
June 10, 2017 at 1:48 pm #331718rtomcThanks Leo,
Does not work 🙁
http://mobiletest.me/iphone_5_emulator/?u=http://staging10.PRODUCTOSDEPELUQUERIA.INFO
Any suggestion more?
Thanks
RMR
June 10, 2017 at 1:57 pm #331719LeoStaffCustomer SupportHmm 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.
June 10, 2017 at 2:16 pm #331721rtomcOK 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
June 10, 2017 at 2:33 pm #331724LeoStaffCustomer SupportJust 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.pngYou should be able to see the same by using the customizer device buttons or resize your browser to smaller width instead of that website.
June 12, 2017 at 10:19 am #332491rtomcThanks 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.
June 12, 2017 at 10:22 am #332493LeoStaffCustomer SupportThanks 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?
June 12, 2017 at 10:47 am #332508rtomcOh yeah !
Now it’s better !
Thanks a lot !
RMR
June 12, 2017 at 11:10 am #332518LeoStaffCustomer SupportYou’re welcome!
-
AuthorPosts
- You must be logged in to reply to this topic.