How do I create a responsive button?

This is good to know:

but I’m trying to make a square button that is not a fixed measure, so that on small screens it’s small and on big screens it’s big.

There is the aspect ratio variable but it’s not working, I set it to 1 but it doesn’t make it square.

@maxb you could get the width of the screen/container, then calculate a percentage of this (say 30% of 100px for handiness) which would be 30px. In the blocks, set the width and height to this value.

1 Like

ok, but i can set that value directly in the designer, but it doens’t work

You don’t need the designer properties if you do this way. Mind you, aspect ratio should be working.

this is working for you?

@maxb here’s an example that creates a square button, roughly 1/4 the width of the screen.

I’ve also just updated one of my old tutorials (from 2017!) so that you can make sure the button doesn’t get too big or too small:

Hope that helps.

1 Like

Yes thx, they both helped although, if I’m not wrong Iwas able to make the aspect ratio work in the design tab without using blocks, cause in theory if i set the width to 40% and aspet ratio to 1 it should automatically make a square, but it doesn’t in this case, I’m trying to undesrtadn if I should change other settings but don’t know.

Btw your slider app wasn’t showing the changes so I edited it but the slider is kinda broken, maybe needs some more tweaks

I noticed that too - It’s just on Web Preview but it works fine in Thunkable Live.

I haven’t actually used that property before but I’d try it with a PX value rather than a % value first and see whether or not that works.

Oh, if only I could use the app…

Btw, I’m realizing that I will have to create blocks for every button if I use the block way, or create a “for every any button in list… do this” which is very not optimized in my opinion, it has to be doable by the design part, maybe a clickable box near the height and width with “same as width/height”

Buttons must have a text @maxb ? If they don’t, there are several ways to create them. If text are necessary, then the loop for the clones


1 Like