Streaming live at 10am (PST)

[Tutorial] How to make hero section always fill browser window

@bartekkustra your contribution to this forum is greatly appreciated. Not just by us but by all the people you have helped along the way. We always try to add highly desired features to Webflow so they are easily accessible and so Webflow users don’t have to write code to get the same functionality. You’re always ahead of the game when it comes to cool javascript-based widgets and functionality because it’s faster to implement it by adding code vs having a widget in our component library.

So please don’t take it personally - we’re just trying to make these things more accessible to more people.

What do you mean by pop-up windows? If we can turn that into an easy-to-follow Tips & Tricks topic (before we implement something like this directly in Webflow) I’m sure a lot of users will find it very useful.

1 Like

Like the one I made here: http://ateliersainthonore.com when you press “Adresse” or “Contact”. Easy to do. It’s just a block made in Webflow that is simply set with display: none. jQuery code just goes like

$(document).ready(function() {
  $('.contact-button').click(function() {
    $('.contact-popup').fadeIn();
  });
  $('.adresse-button').click(function() {
    $('.contact-popup').fadeIn();
  });
  $('.close-popup').click(function() {
    $('.contact-popup').fadeOut();
    $('.adresse-popup').fadeOut();
  });
});
2 Likes

Is there a “safer” way then to implement the code @bartekkustra above wrote for centering the content in the full height hero then - or is it better to just use relative/absolute positioning on each item? Also, which method is better / more reliable - Method 1 or 2?

Thanks in advance guys! :smile:

@jaidenraleach - I prefer method 2, simply because you can style and see everything immediately in webflow. Take note of the percentage values used in the Position controls:

https://webflow.com/design/full-vert?preview=8ec5bbeb365da8f9073cf5f7dbd74892

3 Likes

Awesome @danro thanks for the tip, seeing it in the designer is extremely helpful (and no JS is a bonus too).

I had been playing with VH previous to this post coming up, and it doesn’t play nice on android mobile/tablets or explorer…It’s still not 100% supported

2 Likes

Yea I fiddled around and noticed that too. Looks like absolute heights will have to do.

This is freaking awesome. I was looking for exactly this answer, hoping it had been addressed. Thanks so much for such an amazing tool!

Works like a charm! Thanks :smile:

1 Like

There seems to be an issue somewhere I dont know, but need your help.

I have integrated thesergie option 1 and this: [Code Tutorial] Full window site, I inserted an image with a width of 100% into the container. my observations.

  1. The image is not responsive with the container size when the browser window is resized.
  2. The 100% height of the container does not put into consideration the containing image so the image creates an annoying gap when looking at the different devices sizes.

Same issue too with this script here:

$(document).ready(function() {
    vph = $(window).height();
    $('.full-page').css('height',vph);
});

$(window).resize(function(){
    vpw = $(window).width();
    vph = $(window).height();

    $('.full-page').css('height',vph);
});

How can I ensure the image within the container div. “full-page” is responsive or fills the container in all media queries. Kindly resize the browser window and you will see the gap below the container. The image suppose to fill that height.

url: https://webflow.com/design/verticalmenu-sub?preview=1d6fc3749214ed69ab6a5f2c665db1a4

http://verticalmenu-sub.webflow.com

Instead of having an image inside the div, why don’t you have a background-image that has contain parameter? :)

Yes, bartekkustra that would be have been the right thing to do. But because WF doesn’t support page by page css. It would be hell after exporting the code out of WF and templating it outside WF. If there is any slight change in the website, it affects the entire css including background images and I would start the templating process all over again.

So in my little wisdom, I decided to go via this route, but I know I would need a js solution to achieve this. So that is why we call the “js ninja” to come to the rescue.

I don’t understand what would be the problem with backgrounds. You can simply refer to the object with a unique id. Contact me over Skype and we will find a way out of this situation. Details are in my profile.

Ok. I just sent you a message on your skype not long ago. I hope u r available. Please ring when you are available. Thanks.

Fantastic! For anyone not wanting to touch the scary JS, use the Webflow instructions, worked perfectly for me! check it oout http://concept1.webflow.io/

Cheers @danro!

1 Like

A post was split to a new topic: How to create Full Page scrolling sections

This is old but I was searching for how to do this and found this page, so ty so much guys.

I used method 2,but it’s a very non standard site, so instead of using the directions for “body” and “section” I just read it as “parent” and “child” and worked great!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.