Hi all,
I’d like to have some pages in which when they load, a colour section automatically takes up the height of the browser window, and scales up or down accordingly if you change your browser window size. Essentially it’s a fullscreen color div, and the content beneath only appears once you start to scroll the window.
I have experimented with different approaches (such as setting a 100% height for a custom ID applied to the color section DIV, but it doesn’t work.
Does anyone know if it’s even possible with Enfold?
Thanks,
G
Hi Glyphism!
You need to hire a freelance developer to do this for you or use the Fullscreen Slider element.
You can also try this:
Insert a Color Section then add a section ID on “For Developers: Section ID”. Let’s add “fullscreen-section” for example. Edit js > avia.js, find this code:
$.avia_utilities = $.avia_utilities || {};
Below, add this code to modify the height of the #fullscreen-section.
$(function(){
$('#fullscreen-section').css({'height':($(window).height())+'px'});
$(window).resize(function(){
$('#fullscreen-section').css({'height':($(window).height())+'px'});
});
});
Cheers!
Ismael