DEV Community

Charanjit Chana
Charanjit Chana

Posted on

As usual, less is more

I spent an hour today tweaking how the layout works. I had somehow made margins and paddings behave slightly differently for mobile and desktop without actually overriding anything. To be honest Iโ€™m still not sure how I did it but after taking it back to basics, it now scales correctly.

Iโ€™ve now noticed an issue with searching on mobile Safari after reworking some logic around jumping to page anchors. The jist of it is that padding: fixed is ignored when the virtual keyboard is shown. Annoying but nothing I can do about it in CSS it seems. Maybe Iโ€™ll reevaluate how the header works, but as always you can see my progress so far here: https://theneptunes.1thingaweek.com/

Top comments (6)

Collapse
 
fahmifan profile image
fahmi irfan

Nice app man. Only one cons i found. When i type in search bar, it feels like freezing. Maybe add a search button, so it wont update the dom every time we types

Collapse
 
cchana profile image
Charanjit Chana

Thanks for the feedback! Iโ€™ve been thinking the same about search. It wasnโ€™t really a problem until I changed where the results are displayed. Itโ€™s a better experience on desktop but problematic on iOS. What OS did you use to test it?

Iโ€™ll probably go with a search button tbh, takes any ambiguity out of it and will provide a much nicer experience for everyone.

Collapse
 
fahmifan profile image
fahmi irfan

I test your web app on Android phone.

Thread Thread
 
cchana profile image
Charanjit Chana

Thanks, so itโ€™s a common problem across devices rather than OS specific which means a search button will take care of that. Thank you again for your comment and suggestion! ๐Ÿ˜€

Thread Thread
 
fahmifan profile image
fahmi irfan

Sure, no problem man ๐Ÿ‘

Collapse
 
raddevus profile image
raddevus

That looks really great. Keep on going. Good luck in the challenge.