display problems with Mozilla Firefox for Mobile

[pmodugno]

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?

[Ernest Marcinko]

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:

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

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

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

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

</div>[/html]

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:

[code].navbar:after {
content: "";
display: table;
clear: both;
}[/code]

or if that’s not working, maybe:

[code].col-xs-12.col-sm-12.col-md-6 {
clear: both;
}[/code]

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

[Author]

Posts