hi,
i have been trying to do a totally responsive page where the images and divs respond dynamically to changes in the browser height and width.
so far this is what i have got: fiddle
the images change in height and width, however, the position of them should stay within the container and one should float left and one right, no overflow
ultimately, i would like to have this: http://i.imgur.com/6ZVaaC7.jpg?1
where even the text changes height, any suggestions on how to proceed?
thanks
Trust me, that sounds nice in theory, but due to how vw/vh/vmin/vmax calculate values, you will never get a consistent result across every screen. A chromebook with less vertical space will havea different font size than someone with a monitor slightly taller but the exact same width, etc.
I tried going for fully responsive VW font sizes, but there is no great way to do it universally without media queries. And if you need to do that, for ease of code + simplicity, why not do the html{}+rem+media query I chose?
The best I’ve found is to give the html{} element a font size, then use REM to base the font size off of that. Combine that with media queries to change the html{} font size at different screen widths.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
