CODEWITHSUNDEEP
javascriptcssfullpage.js
snow
snow

Reputation: 475

Responsive fullpage.js: increase viewport to display full content

I am using fullpage.js to design a fullpage carousel like site. The problem i am facing is in implementing the responsive features when the contents of a section (see #section-1, sections start from section-0)extends outside of the viewport.

What do i want?

Originally, i wanted to go with scrollOverflow: true but that didn't seem to work. It inexplicably cut off (hid) my elements midway. I read in other posts that the author discourages it's use. Then i used respondsiveWidth, set it to 980 since i wanted the responsive mode to kick in if the window is resized or loaded at a width less than 980px. The scrollbar works fine with this, but the height of the section remains the same i.e one full viewport. What i want is that this section to extend and accommodate its the entire contents.

What have i tried?

afterResize: function(){ if((window).width < 980) { console.log("980"); $("#section-1").addClass("fp-auto-height-responsive"); } }

i tried with CSS:

#section-1, #section-1 .fp-slide, #section-1 .fp-tableCell{ height: auto !important; min-height: 100%; }

I also declared a separate class in CSS, added the above properties and did a addClass if window.width is < 980 in my javascript file.

Codepen

Nothing i do seems to work and i a at the brink of a nervous breakdown.

Help will be appreciated.

Upvotes: 4

Views: 5134

Answers (1)

Alvaro
Alvaro

Reputation: 41595

What i want is that this section to extend and accommodate its the entire contents.

That's what fp-auto-height-responsive is for.

You might not be using it properly. You do not have to add it dynamically, but just add it the section you don't want fullPage.js to restrict the dimensions.

<div class="section fp-auto-height-responsive" id="section-1">

Your demo is working properly for me. The blue section won't get the viewport size when responsive is fired and the text won't get cut.

If you are asking for your 2nd section, that's totally normal. You are using a fixed element. Same as if you use absolute. There's nothing fullPage.js can do for you in those cases. fullPage.js only STOPs restricting the dimensions of the section, which means it will take whatever dimensions it would take otherwise. And in your case, any fixed or absolute positioned element won't force its parent height to change.

Upvotes: 3

Related Questions