- This topic has 5 replies, 2 voices, and was last updated 9 years, 3 months ago by
.
-
Posts
-
We are moving our site to the new Flatsome 3x version and using your latest release. We want to use the shortcode version for our mobile setup. The search input field gets “crunched together”. If you view on a mobile device you can see the search box above the logo is fine as we told the search plugin to replace the default theme search. The search below the logo is the same search but using the simple shortcode.
Thanks,
Darryl
TEAMPetSupply.comHi Darryl,
Because the search width is set to auto, it follows the parent element width, which gets really small on small devices.
The best possible solution in my opinion is to simply add a min-width property for the search container via CSS, so it never gets smaller than a specific size:
[html].asp_main_container {
min-width: 240px;
}[/html]I added that code but it didn’t change it.
Also, Regarding the one above the logo that is working because it is not the shortcode, is there a way to get it to be edge to edge on the mobile device? There is a margin on each side but I don’t have one defined.
Thanks,
Darryl
That is because it’s supressed to one line (I’m guessing by minification) and the space/tab elements are conflicting. Try it like this:
[html].asp_main_container{min-width: 240px;}[/html]
that should work.
The margins/padding are added by the parent elements, not the plugin. You could try this custom CSS to reset them to 0:
[html]#top-bar>.flex-row.container,#top-bar>.flex-row.container .header-block {padding: 0 !important;margin: 0 !important;}[/html]
I’m not sure if that is the correct way, you might have to as the theme author as well.
Your are awesome…..
1) Yes that made the top bar full screen.
2) Yes that adjusted the lower one and I can now see it. I guess the question is what do I set it to for any device?Third question I didn’t ask before: If I wanted to do compact next to the logo on the left side, is there a way to have the search bar open but below the search icon so that the logo doesn’t get covered?
Thanks for your help!!!
Hi,
3. I’m afraid that is not possible without some kind of custom script. I would probably add a simple search icon there, and the search bar below that (into a container element), which I would set to invisible by default. Then when the user clicks on the icon, the search bar container would change it’s visiblity. This is the easiest solution I can think of.
It will however require some coding. In case you need help, I can recommend wpkraken.io, it’s a new service from some of the envato authors, so far nobody complained about them.
- You must be logged in to reply to this topic.