Good design ideas for smaller screen?
As you see in the image below the blue button that says "add" is way to big for the smallest size screens, Does anyone have any ideas to make this look better?
https://codepen.io/hrphyn/pen/QWPWVJa
16 Replies
Have it stack on small screens so the input is on top of the button. You’ll probably have to adjust some other styles.
Also you’ll want to fix the margin/gap in “ToDo List”. There’s no margin in between the icon and the “T” and a substantial gap between “t” and the second icon.
Could you help me do this please?
Ok I fixed it!
I realized the text that states "Finish Up Portfolio" Isn't perfectly centered how can I fix that? ( I updated CodePen)
Sorry I don’t have time to dive into this but that text is your placeholder within your input so probably something to do with the padding on that element. Put an outline on your text input and see where that element is, if it’s centered, and how the padding is affecting the placeholder.
Alright, I'll take a look into that. Appreciate you Clever.
Any padding for this component should probably go on the parent in this case. Then you can use :focus-within to set up focus state
Alright, I'll try that out!
And careful with those id selectors #main etc. it’s not an IF but a WHEN it’s gonna get you in trouble with specificity. Use classes or at the very least select it as an attribute
Alright, thank you!
Did you get it figured out?
Not fully, I also stopped coding since I've been doing it for around 3-4 hours today so Im gonna continue tmr
Why don`t you just move the buton outside of the row?
I have a different design for bigger screens which I like
Alright well when you get back to it if you’re still having issues, update your codepen and tag me I’ll try to help
Will do thank you!