Popup responsive to my display

Hello everyone,

I have created a button for a battery that, when pressed, triggers a popup displaying all the batteries in my home. I’ve been using the Bubble Card for this functionality, and it works perfectly. However, my problem with it is that I’m unable to make the popup responsive to the display dimensions.

What I need is for the grid of battery cards to automatically adjust based on the screen size. For example, I would like to have 3 horizontal cards displayed on a PC or tablet and only 1 horizontal card on a phone.

Can anyone help me figure out how to achieve this? I want the layout to be dynamic, like a grid that adapts to different screen sizes.

I’ve attached screenshots from my PC and my phone to illustrate the problem.


Thank you for your help!

1 Like

Take a look at using the @media function

@media screen and (max-width: 400px) {

1 Like

I have tried didn’t work with me.

Solution: I have used Browser Mod instead of Bubble card