display problems with Mozilla Firefox for Mobile

[pmodugnoParticipant]

Hello, I am writing for the second time because I noticed another problem. In practice I have found any problem only on Mozilla Firefox (with all other browsers work correctly and perfectly!).

The display problem I check when I resize the browser window with Mozilla Firefox. You can try it too. This is my test site my website

Try to adjust Mozilla browser window and you’ll understand what I mean. The input form overlaps with other HTML elements. Can you kindly tell me how can I fix this?

I attach a picture to make better my problem.

Thanks again and I’ll again congratulated for the excellent work. Thank you!

ps: can be bootstrap that I use?

Attachments:

You must be logged in to view attached files.

[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 :)

[Author]

Posts