Make buttons more responsive #263
Conversation
On tablets and larger phone screens, these two were lacking a margin setting (leading to a "squished" look). This commit resolves that.
|
Someone is attempting to deploy a commit to the dottle's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Just a nitpick. While it looks great on most screens, the button contents get wrapped around on smaller screens:
Not critical but we can do better
What you can do is remove all the flex stuff and have something like this:
<div className="...">
<button className="inline-block mt-2 me-3 ...">btn1</button>
<button className="inline-block mt-2 ...">btn2</button>
<div>
This way the buttons will just wrap around whenever the screen gets too small. The me of btn1 will space out the buttons when they're horizontal, the mt of btn spaces them out when they're vertical, and the mt of btn1 makes sure they're on the same level when horizontal.
Let me know if you have any thoughts
There was a problem hiding this comment.
Just a nitpick. While it looks great on most screens, the button contents get wrapped around on smaller screens:
Not critical but we can do better
What you can do is remove all the flex stuff and have something like this:
<div className="...">
<button className="inline-block mt-2 me-3 ...">btn1</button>
<button className="inline-block mt-2 ...">btn2</button>
<div>This way the buttons will just wrap around whenever the screen gets too small. The me of btn1 will space out the buttons when they're horizontal, the mt of btn spaces them out when they're vertical, and the mt of btn1 makes sure they're on the same level when horizontal.
Let me know if you have any thoughts
|
Sounds like a good idea! I'll try to make it happen.😊 |
On tablets and larger phone screens, these two were lacking a margin setting (leading to a "squished" look). This commit resolves that.
Before:
After: