I think the responsiveness is just a tad bit messed up...
Alrighty, I've created a very plain and simple Calculator but on the small screen (320px) It looks terrible what's the best way to go about fixing this?
8 Replies
No idea, this is a screenshot Check #how-to-ask-good-questions
Sorry I should've sent a CodePen
Honestly forget about it, I'm tired man.
Are these rows with flexwrap? If so I would use grid autofit instead. As well as using clamp() on fontsuze so the padding and width of the button is in ems. Could also use container queries to arrange buttons as you want
those are just regular buttons (inline) in a normal div, so they wrap to the next line if there is no space.
indeed using grid would make more sense here.
here a basic way to set it up, (you can style it like you want)
https://codepen.io/MarkBoots/pen/GRewyoR
As you said I didn't respond and that is truly disrespectful but I do actually want to say Thank You since you've managed to solve a problem I've been dealing with and now the project it self looks much better!
You used flex wrap, but the inputs are not direct children of the flex container. You have divs wrapping groups of inputs. Those divs are what the flex wrap applies to, so the result is ugly. Just remove the divs and let the inputs be direct children of the flex container.