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
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.
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..)
Similar to this
Just have it all in one
Wait how'd you throw them together? I tried to do the same and it broke.. Is it through the divs?
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