Shortcodes not working

This topic contains 5 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 5 years, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #12049
    dgaeman
    dgaeman
    Participant

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

    #12053
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

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

    .asp_main_container {
        min-width: 240px;
    }
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #12055
    dgaeman
    dgaeman
    Participant

    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

    #12056
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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:

    .asp_main_container{min-width: 240px;}

    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:

    #top-bar>.flex-row.container,#top-bar>.flex-row.container .header-block {padding: 0 !important;margin: 0 !important;}

    I’m not sure if that is the correct way, you might have to as the theme author as well.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #12057
    dgaeman
    dgaeman
    Participant

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

    #12073
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


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

You must be logged in to reply to this topic.