Reply To: display problems with Mozilla Firefox for Mobile

[Ernest MarcinkoKeymaster]

Hi!

I see multiple issues there.

The search shortcode is placed inside a Form element, which causes invalid HTML output and possibly malfunctioning as well – beacuse the search uses it’s own form, and a nested forms are prohibited in HTML.
The solution is to remove the container form element.

Currently the shortcode must be placed something like:

<div class="col-xs-12 col-sm-12 col-md-6">
    <form ....>
       <?php echo do_shortcode("[wpdreams_ajaxsearchpro ...]"); ?>
    </form>
</div>

and the correct layout is without the form, so something like:

<div class="col-xs-12 col-sm-12 col-md-6">

       <?php echo do_shortcode("[wpdreams_ajaxsearchpro ...]"); ?>

</div>

This might not solve the problem yet, because there is something else. The navigation bar is a floating element as I can see, and the “col-xs-12 col-sm-12 col-md-6” div container is not. So it just sits on top of the floating navigation bar incorrectly.

My suggestion is to use a CSS code to force a floating clear before the search is displayed:

.navbar:after {
    content: "";
    display: table;
    clear: both;
}

or if that’s not working, maybe:

.col-xs-12.col-sm-12.col-md-6 {
    clear: both;
}

I don’t know exactly, it’s not a plugin related issue, but I guess one of these should work.

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