Reply To: Search results container floats above the header on mobile screen

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Search results container floats above the header on mobile screen Reply To: Search results container floats above the header on mobile screen

#16351

Ernest Marcinko
Keymaster

Hi!

I have checked the URL on multiple devices, but it looks okay to me, I see this: https://i.imgur.com/Avf1MpY.jpg
Is this not correct? Let me know!

The 'flash' during the page load is probably because there is a minification active on your site, that appends the stylesheet file to the bottom of the page. The minification is not an issue, but the CSS file should not be in the footer, unless it is not that important to load within the header. This phenomenon is called the Flash of Unstyled Content aka FOUC.
So while that last CSS file loads on the end of your page, there are no initial styles whatsoever in the header, that would prevent the form from displaying before the CSS is loaded. A possible resolution is to either move that CSS file from the footer, or add a small custom CSS to the header of the site as inline CSS to prevent the FOUC.

Try this one, but make sure that this is within the header, as an inline CSS:

.asp_m {
    height: 0px;
}

This will change the search bar height to 0 pixels initially (essentially invisible), and when the last CSS file loads with the original search style, this is automatically overridden by a higher specificity CSS rule (changing the height to 'auto'), so the search should pop as styled afterwards.

I hope this helps!

Best,
Ernest Marcinko

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