Fullpage.js: Flexbox compatibility question

[KayJay89]

Hi all,

First of all, wonderful plugin been having lots of fun with it.

However I do want to ask a question which might or might not be a bit silly, as I am relatively new to javascript plugins. I can't seem to find a question about it so here goes:

Is Flexbox incompatible with this plugin? It would appear as if my entire layout in set in CSS is being disregarded, as of the moment I incorporate the plugin in my project.

[alvarotrigo]

Flexbox is just a CSS technique.
You can apply it inside seach section or slide as you wish. The only thing fullpage.js does is creating the sections and slides height and width or centering it if you use verticalCentered:true

[shezankazi]

I also have this problem to be honest. Flexbox layouting is somehow disturbed..

[alvarotrigo]

@shezankazi the issue is probably related with the use of display: table-cell on the.fp-tableCell element that wraps your section content when you use the fullPage.js option verticalCentered:true.

Try using verticalCentered:false and you will get rid of that display property.

[kwiat1990]

My layout was disturbed by this plugin too. What has helped me, was to change the value of verticalCentered to false.

[Dan-Traian]

@kwiat1990 This has fixed the problem in my case as well. Thanks for the info :)

[atrimn]

Hey guys just go one level down. If fullpage is targeting section #s1 put a display flex div inside of it

[AdelinaLipsa]

@kwiat1990 I've spent 2 hours trying to figure it out. Your solution worked for me too. Thank you :)