Vertical Responsiveness

Design help General
1

I am looking for a way to make all of the contents of a particular Section vertically responsive to different browser sizes. Currently if you drag the bottom of the browser window up, it cuts off part of the image and the text stays at the same height. See here: http://bondstreet131245.webflow.com/

However, if you look at the website http://Exposure.so you’ll notice that the background image resizes and the text realigns when the browser window is less tall.

Is there any way to replicate this in webflow?

2

You can create different css styles for different devices. The default version is desktop, however if you look on the left tool panel you’ll see options for tablet-portrait, phone-landscape and phone-portrait.

Hook those style up with some good design, and you should be good to go!

3

Do you mean if the browser has a different height you can have different styles?

Taller browser:

Shorter browser:

4

@David_Haber interesting question! While CSS is typically not very adept at working with browser height (because of document vs. window heights), we can add some JavaScript to help get us there.

First, add this in your dashboard, under the </body> tag section:

<script>
  Webflow.push(function () {
    var fulls = $('.full-page');
    var win = $(window);
    Webflow.resize.on(function () {
      fulls.height(win.height());
    });
  });
</script>

Then, you’ll need to be sure and set any of the “full-page” sections to overflow:hidden, because otherwise they might show a nested scrollbar.

Finally –the tricky part– you’ll need to style your inner elements using absolute or (explicitly) relative positions. This means instead of using margins, you’ll need to set top and bottom to percentage values to achieve a vertical fluid layout.

Good luck!
-Dan

1 Like
5

@David_Haber sorry, please note my edit above in regards to vertical margins.

6

Yes, this is what I was referring to. Varying vertical heights in the browser. Will give @danro’s tips a shot and see how it works. Any plans to make this easier to accomplish without the JS?

7

@David_Haber Here’s an attempt at building this purely in webflow without any JS.

http://full-vert.webflow.com/

Webflow designer link here.

Few points to keep in mind:

  1. Body height must be set to 100%
  2. Section height must be 100% and the position must be set to relative.
  3. Divs within section must have an absolute position, using % units.

Enjoy!
-Dan

1 Like
8

Ah, @David_Haber my bad for totally mis-understanding the question. @danro - that’s an awesome solution, will have to try it on my own projects.

9

I know I’m late to the party, but there’s a new CSS unit called “vh” (vertical height) that might be useful. If you want to use it in Webflow, just type “50vh” into the Height field, and it should switch to use that. It seems to be supported back to IE9 (Viewport units: vw, vh, vmin, vmax | Can I use... Support tables for HTML5, CSS3, etc).

10

This topic was automatically closed after 10 days. New replies are no longer allowed.

12

This topic was automatically closed after 68 days. New replies are no longer allowed.