Small question. I’m trying out responsive design to create a site that will work on desktops but also potentially phones and such. The basic parts of this design seem to make sense but Im not clear on height. Like I have a logo at the top and then below that is a menu bar. I can’t think how to set the height between those as a percentage because the height of the page will vary based on content and so at least to my understanding it seems like it would become potentially stretched vertically.
Height wise if i want it to be fairly specific should I just be specifying EM?
Thanks for reading.
It kind of depends on the circumstances. Generally, it’s not a good idea to set heights, unless the element is something pretty static like an image. I would say set a pixel height and width for the logo, but leave heights off everything else.
Well the context is the above but anything similar to that. Basically if I’m understanding it correctly, were I to set the height of the nav bar to like 6%, then what would happen if the content there was doubled and thus the page was longer? Wouldn’t the 6% become significantly larger in proportion even though it is still on the same resolution? It seems like it’d be inconsistent in that regard so I’m wondering if that is how it works and if so what is the best way to handle it. For content obviously the height doesn’t matter as that’s on the fly anyway.
But if I say set a specific height for the logo, what would happen if the site was then viewed on a smaller resolution? Will I have to program in different heights for different screen-sizes?
% height is tricky, because unless the container has a fixed height, a % setting won’t do anything anyway. Generally, steer away from % height.
With the design pictured, I don’t think you have to worry too much about these issues. Let the logo and navigation find their own natural height, and they should work fine on all devices.
K, thanks for the input guys, it helped make things clearer