14 replies

how does one make this design more responsive?

ive been stuck with this for almost a week and figured it's best i ask for help to get things kicking
there's a bunch of related problems but im not too sure how best to articulate them so i've got this setup
after the dev container environment is setup and the preview of the app is showing (it can take awhile), click on the icon on the right side of the preview address bar to pop it out onto another tab, this is so u can have devtools on it and conveniently inspect all the elements.
when u alter the code on the editor, remember to hit ctrl-s to save it and the preview would correspond to the changes.

so here's the problem:
i noticed that even on the newer iphone models like 14 and 15, the lower part of the app where an emoji appears after the game is over doesnt show up, so i figured i'll have to reduce the height of everything.
rather than doing that why not make the buttons responsive to the width of the viewport instead?

ive tried using relative units on the choice buttons like using % or vw but they change the look and proportion of the buttons too much or it becomes too small or too large and overflows
you can uncomment some of the code in src/App.scss in the

.user-interface

.user-interface

.choices

.choices

and

.choice-button

.choice-button

sections to try it out for yourself
im guessing that part of the problem is that the

.choices

.choices

container for the buttons also affects the width of the buttons and that i should consolidate all these properties that can affect the size of the button onto just 1 class so it isnt confusing and easier to adjust?

there's also the problem of the address bar and tab bar on mobile browsers taking up space. for eg. on my old iphone this makes the effective viewport only 370x545. im wondering if i should accomodate this design for older phones..