Responsive button icon + text

For mobile view I only want to show an icon on the button to save space. For bigger screens both icon and text. What do I do? I have tried to change to only icon for the button type on mobile view, but it keeps changing back when I add icon and text for bigger screens.

1 Like

Is the button you made from the bubble element “button” or a “group” that act as a button?

I am testing with both. I have one group button with an meny icon and an profil image. Then testing with a bublle button element with an icon and text.

You mean like this?
chrome-capture-2024-9-9

yes :heart_eyes:

Is quite easy actually, i would prefer you to use group since “button” don’t have conditional state for “button type” all you need to do is…

image
image
Use condition like that based on the pixel you want it to be
Don’t forget to check “collapse when hidden”

Don’t forget to check your group into “fit width to content” (optional)

I think I have done as you have done and it still doesn´t work. What am I missing?

200 is the width of the screen, you need to choose it yourselft at what width will it be hidden

also have you set the “this element is visible” ?

On the picture you can see the condition is still “OFF” (Top Left) that means the width of the screen is not lesser than 200px, maybe try 370 since bubble standard for mobile screen is 360px

I have tried different width, including 370. ‘This element is visible’ is set for the text elemnt. Still the same regardless widht :confused:

Can you show how your settings look like on e.g. 1200 width?

Hmm I don’t quite understand what you mean by that It should have work, this is another case with different condition
chrome-capture-2024-9-9

Can you have full screenshot on the condition you set on the text?
My Editor: Forum_Answering | Bubble Editor

yes exactly thank you

Thanks for sharing editor. It helps for me to double check.

It works for me at breakpoinits 1200 and 992. I can see the text color change between red and green. But the text doesn’t want to hide on 320. For some reason it also says OFF so I guess that might be the issue now. How do I change it to ON and keep the breakpoint?

XD you forgot to set the condition property for 320, check the difference between you and mine.

Where do I look and set set the condition property for 320 other then what I shared above?

1 Like

chrome-capture-2024-9-9
Sorry should have explained more detailed

ah, nice. Now it works :heart_eyes: Thank you :heart:

Your Welcome! :two_hearts: