I have quite a specific problem and just cannot seem to figure out what is going on.
I have a Fontawesome search icon which when clicked opens a VM search in a dropdown. This works fine on most mobile screen sizes and desktops but, for example, when using Chrome Dev tools and selecting iPhone X in landscape the icon is not visible. I have clicked through the classes and cannot see any display:none on this screen size so am completely at a loss as to why it is not displaying.
The related code is:
<div class="serchline"> <form action="/all-products/results,1-24?search=true" method="get"> <div class="searchsearch"> <input style="vertical-align :middle;" name="keyword" id="mod_virtuemart_search" maxlength="100" alt="Search" class="inputboxsearch ac_vm ac_input" type="text" size="100" value="Type text and hit enter" onblur="if(this.value=='') this.value='Type text and hit enter';" onfocus="if(this.value=='Type text and hit enter') this.value='';" autocomplete="off"></div> <input type="hidden" name="limitstart" value="0"> <input type="hidden" name="option" value="com_virtuemart"> <input type="hidden" name="view" value="category"> </form> <div class="ac_result" style="display:none;"></div> <div class="sropen"><i class="fa fa-search"></i></div> <div class="srclose"><i class="fa fa-times"></i></div> </div>
I have flicked the site into Dev mode at present as I want to get this fixed so to view the site you will need to click here
I was hoping someone may be able to assist as I've been racking my brain over this for quite some time now.
UPDATE: The icon seems to disappear when the width goes above 768px so I'm still scouring through trying to find a media query which could relate to this.