Forum Documentation Showcase Pricing Learn more

Viewport Size Hieght/Width

@emmanuel how hard do you think it is to give us access to viewport height/width which enabling us to set dynamic height/width for elements?

In the example site below the image adjusts to the viewport size. This allows the image to cover the entire page and adjust its height and width to the viewport.

I think this will open up allot of possibilities like full-screen maps, images, videos and displaying messages that are front and center the require user attention.

Please take a look at this website while changing the window height

https://wordpressboss.com/tf/tour-lover/index-image.html

I also found this for javascript

Cross-browser @media (width) and @media (height) values 

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.innerWidth and .innerHeight

gets CSS viewport @media (width) and @media (height) which include scrollbars
initial-scale and zoom variations may cause mobile values to wrongly scale down to what PPK calls the visual viewport and be smaller than the @media values
zoom may cause values to be 1px off due to native rounding
undefined in IE8-
document.documentElement.clientWidth and .clientHeight

equals CSS viewport width minus scrollbar width
matches @media (width) and @media (height) when there is no scrollbar
same as jQuery(window).width() which jQuery calls the browser viewport
available cross-browser
Resources

Live outputs for various dimensions
verge uses cross-browser viewport techniques
actual uses matchMedia to obtain precise dimensions in any unit
3 Likes

Yes, this would be an amazing addition and really give Bubble full responsiveness flexibility. I would love to be able to have hero/landing pages with background image filling 100% width and height regardless of screen size. Please consider this Bubble:pray:

1 Like

Yes it would be nice. I always wanted to do a full page map

1 Like