Responsive Ideas

Hello there! Thank you in advance for your help. I've been working on a Weather API that I need to finish by tomorrow, but I've run into a slight issue. I want to make the website more responsive for mobile users, but I've honestly run out of ideas on how to make it look much nicer on a smaller screen. So, I'm reaching out to anyone who's skilled in these matters to see if they can possibly do something to enhance the design. Your assistance would be greatly appreciated. Thank you! https://codepen.io/hrphyn/pen/dyLYXVv
6 Replies
clevermissfox
clevermissfox•9mo ago
If you're going to have the button below it on mobile, it needs some gap between since they are touching. I would also use a whole word "🔍Search" on mobile if it's going underneath so the sizing balances out. Thr small found icon button looks awkward. Alternatively, you could put the icon and input in one container and that is what has the background so there is no break bw the input and the button since it's just one small icon.
No description
RMON
RMONOP•9mo ago
If possible, could you go more into detail/show me I've tried this earlier and kept screwing up. (Side note, I'll have to get back to your tomorrow as It's almost 12am and I have school..)
clevermissfox
clevermissfox•9mo ago
No description
clevermissfox
clevermissfox•9mo ago
Similar to this Just have it all in one
RMON
RMONOP•9mo ago
Wait how'd you throw them together? I tried to do the same and it broke.. Is it through the divs?
clevermissfox
clevermissfox•9mo ago
I'm on mobile so can't fork right now but yes. The .search div. Moved the bg color and border radius to it. Gave the input a bg of transparent , took off the border radius, gave it a width(inline-size) of 100%. Took off the margin from input as well Didn't you just have a similar input with the button on the same line earlier this week? Same idea, you could try using that code as a starting point This is the one I'm thinking of. You could use this container+input+button as the structure https://discord.com/channels/436251713830125568/1212947234271002704/1212947234271002704
Want results from more Discord servers?
Add your server