Streaming live at 10am (PST)

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


#1

I'm trying to make my slider expand to the full-width and full-height of the browser window. Like in this example: http://demo.bootstrap-hunter.com/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):

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
	});
});

#6

Thanks @bartekkustra! I'm learning jQuery/Javascript right now so this makes a little sense to me. I'm quite happy about that 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 smile


#8

sweet smile thanks @bartekkustra. gonna work on this soon...


#9