How do you approach height responsive website?
So i developed webapp in react + chakra-ui. I was developing it on monitor with 2160 height dimensions (either 4k or UHD).
When i opened application on full HD monitor (1920 x 1080) everything looks so big. Header, Left and Right sidebar.
Most of the time I was fusing on width responsiveness and this issue got me thinking. One idea I have i my mind is to use "em" unit everywhere (even on fontSize) and scale it on the parent using media query. What is you approach to something like this?
7 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
using em on font size can cause non-linear size changes when you nest redeclarations
I mean, even a
px isn't a screen pixel, so 10px on a 4k should look the same as 10px on a HD monitor... maybe there is something elseLets try to provide a bit more help than just "use flex" - Note I'm somewhat guilty of saying "just use grid" but after I try to provide an explanation/demo of how it would work.
Could the issue be you are using vh/vw for things? @Interpod
This is the reason you really need to provide a minimal example, all we can do is guess.
https://codepen.io/b1mind/pen/PojdyQz?editors=0110 here is my goto example for 100 height though if it helps.
@Kevin in such case if i have resolution 1080 and two column layout one 500px and second one 800px then there will be overflow on both 4k resolution and full-hd resolution ?
Maybe I wasn't specific enough. Two monitors, one has resolution 1080 and the other 1920.
Let me give an example. I have top navbar which is, two buttons ( 100px height each) and (200 padding top + bottom) which is 300px.
For monitor which has 1000px height, it will be 1/3 of whole height (this navbar occupies). for monitor which has 2000 it will be 1/6 of whole hight which is really small i guess
Provide an example at this point it's just round and round.
A CSS pixel is not a screen pixel.
Technically, 1000px will look the same on both monitors, regardless of their size and resolution. It's not always perfect, but tends to be pretty close.
If not, 10px on a low res device and on a phone with >300dpi would look vastly different