- This topic has 4 replies, 2 voices, and was last updated 4 months, 2 weeks ago by
.
-
Posts
-
Hello Support Team,
I am experiencing a critical layout issue with the Live Search results on mobile devices. When a search is triggered on a mobile viewport, the results container appears misaligned (off to the side), causing the majority of the content to be cut off and unreadable.
Troubleshooting Attempted: I have attempted to resolve this through the plugin settings with no success:
Mobile Settings: I adjusted various options under Search Behavior > Mobile Device Behavior, but the layout remains broken.
Disabling Mobile Search: I even attempted to completely disable the search bar on mobile devices via the settings, but this change did not seem to take effect (the search bar remained visible or the issue persisted).
Request:
Is there a specific CSS snippet to force the results container to center or fit within the mobile viewport width (e.g., width: 100%, left: 0)?
Could you advise why the “Disable on Mobile” setting might not be reflecting on the frontend?
Environment:
Device/Browser tested: iPhone/Chrome/
Website URL: https://drgt.com/test/
Hi!
Sure, I’m more than happy to help!
So, the main issue seems to be a negative left adjustment value on the document body whenever the side menu opens, and that tricks the calculation for the correct position.
I think there is likely a way to offset this without hiding the search bar. Try this:
@media only screen and (max-width: 767px) { .asp_r_1 { position: absolute !important } body.responsive-overflow-x-mobile { overflow-x: initial !important; } }This should force the correct display mode of the results and fix the calcuation too.
Thank you for the quick response.
I have added the custom CSS you provided, and it is still not working on 3 mobile phones I tried: an iPhone 11, a Samsung Galaxy M36 and a Samsung Galaxy S20.
You are welcome!
The custom CSS is not present on the page though. Can you please check it, and also clear all layers of cache? Sometimes heavy caching may prevent custom CSS to be rendered on the page.
- You must be logged in to reply to this topic.