How to make the slider full-width, full-height?

Design help General
1

I’m trying to make my slider expand to the full-width and full-height of the browser window. Like in this example: Spirito

I’ve made the section 100%, the slider 100%, but it still behaves like this (Later I will put the Header section with a z-1 index and fixed position so it appears on top):

1502×455 139 KB

Any help would be greatly appreciated!

2

Hi.
Settings look OK for the slider. But did you give the Body 100% height?

See images:


Select body


Give class 100% height.

3

@rowan thanks a lot! That did the trick.

4

Yeah, I kinda wanna know how to do everything on that page, from the resizable full screen landing image to the sort and filter work section, to all the layers of interactivity on each image, from color overlays to text flying in and out with the mouse hover. I assume all of that interesting functionality is done with javascript/jQuery, etc…

5 
$(document).ready(function() {
	var window = {
		height	: $(window).height(),
		width	: $(window).width();
	}
	$('.full-image-section').css({
		'height'	: window.height,
		'width'		: window.width
	});
});
$(window).resize(function() {
	var window = {
		height	: $(window).height(),
		width	: $(window).width();
	}
	$('.full-image-section').css({
		'height'	: window.height,
		'width'		: window.width
	});
});
2 Likes
6

Thanks @bartekkustra! I’m learning jQuery/Javascript right now so this makes a little sense to me. I’m quite happy about that :slight_smile: I would need to host or point to the jQuery library somewhere, then, correct?

7

Nope. You can put this code between <script>...</script> in Dashboard Custom Code in the second section before </body>. jQuery library is already implemented :slight_smile:

8

sweet :slight_smile: thanks @bartekkustra. gonna work on this soon…