Responsive button icon + text

ingriddanielsson · 2024-10-09T11:07:31.167Z

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.

BimaAdhtiyaS_12 · 2024-10-09T11:47:56.104Z

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

ingriddanielsson · 2024-10-09T11:50:37.044Z

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.

BimaAdhtiyaS_12 · 2024-10-09T11:58:16.473Z

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

ingriddanielsson · 2024-10-09T11:59:02.161Z

yes

BimaAdhtiyaS_12 · 2024-10-09T12:03:16.127Z

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…

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)

ingriddanielsson · 2024-10-09T12:28:10.523Z

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

image732×738 35.8 KB

image656×748 31.8 KB

BimaAdhtiyaS_12 · 2024-10-09T12:35:14.385Z

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

ingriddanielsson · 2024-10-09T12:42:21.115Z

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

ingriddanielsson · 2024-10-09T12:53:28.722Z

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

BimaAdhtiyaS_12 · 2024-10-09T13:03:22.131Z

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

veronica.smith21436 · 2024-10-09T13:40:25.122Z

yes exactly thank you

ingriddanielsson · 2024-10-09T13:46:37.194Z

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?

image998×1318 92.8 KB

BimaAdhtiyaS_12 · 2024-10-09T13:53:37.181Z

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

ingriddanielsson · 2024-10-09T14:00:34.617Z

BimaAdhtiyaS_12:

set the condition property for 320,

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

BimaAdhtiyaS_12 · 2024-10-09T14:14:57.615Z

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

ingriddanielsson · 2024-10-09T15:43:47.935Z

ah, nice. Now it works Thank you

BimaAdhtiyaS_12 · 2024-10-10T00:21:02.320Z

Your Welcome!