Default search box invisible on small device?

Hello there,

    <div id="search"></div>

I just set it from my algolia app. how can i override CSS for this input?

I’m working also responsiveness for this web app, but when set it small device search box will be invisible otherwise it is visible so i provide pictures (please follow width) to understand better. its like, if min-width:680+ it will be visible otherwise not visible in display.

Any solution for this?

Thanks


Hi @elecabunaser,

If you’re using our InstantSearch front end libraries, the styles all follow a standard naming convention of ais-[WidgetName]-[element]--[modifier] as documented here:

I’m not sure why you’re losing the background color on small devices, but I would start by taking a look at the CSS your importing (most of our users import the satellite.css styles mentioned on that page).

Hi Chuck,
I’m using tailwind CSS on that page, have a look my code…
Screenshot from 2022-12-19 12-19-45