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, .choices and .choice-button sections to try it out for yourself
im guessing that part of the problem is that the .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..7 Replies
advice for developing for responsive width starts at 320px but how many devices have such a small width?
here you can see that as of 2023 the most common mobile screen widths start at 360px
https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design#toc2
pls @ me for replies and ask any clarifying questions you need 🙂
BrowserStack
What is the Ideal Screen Size for Responsive Design | BrowserStack
Find out ideal screen sizes & common screen resolutions in 2023 to test your responsive web design along with the best practices.
I'd still support down to 320 and 280 if you want flip/fold/watch screen support
360 has been the most popular for like 5 years +
mostly cause samsungs s5 was crazy popular around the world
there are 2 iPhones that have 320px though and iWatch.
Far as the view height issue for mobile bars you would want to avoid setting heights on things period but also avoid setting like 100vh
new
svh lvh units help but not fully supported yet, so I would fallback to using the old 100% height trick on html,body. Or using a vmax in a media query.wat should i do if i want to avoid setting heights? do u mean that even relative units for heights is not good?
for example how would u retain the look of the buttons as they expand by not setting a height?
You let your content determine height
Also not sure what you mean about buttons, best if you provide example
hey thanks for continuing to help on this issue.
in the past few days ive tried various ways to let the content determine the height but the buttons always go out of proportion.
i realize might be misguided in wanting to maintain the look of the buttons as the screen width changes, so im wondering wat are the best practices for responsive user interface design in this case.
as an example, this first screenshot has buttons wch are closer to wat i want the buttons to look like. ive added the red outlines for debugging purposes. it is on a resolution of 375x545 cos thats wat my old iphone shows when on a mobile browser when the address bar is on screen.
note also that the last square at the bottom of the screen is not fully shown, this is also one of the problems ive been wanting to fix where the full user interface isnt showing on some mobile browsers.
in this screenshot, as an example of buttons going out of proportion ive removed the
max-height: 38px property and the buttons dont look good now, it is not wat i had in mind
You give it padding