Issue with fullpage.js (section fp-section fp-is-overflow active fp-completely)

Question

I want to have my container in this section with height 100% insted of that my container only takes one little percentage of the sreen and the rest is taken by (section fp-section fp-is-overflow active fp-completely) and I cannot change it, please help.

This is how I have it, That's the only space available for my div This is the space i want to have Here you can see I have my div with height 100% as I want it In the second section the div is perfect as well, just as i want it

 .container-general {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.container-general-2 {
   height: 100%;
   display: grid;
   justify-content: center;
   grid-template-columns: 1fr 1fr;
   overflow: hidden;
   gap: 30px;
  box-sizing: border-box;
 }

.container-3{
    height: 100%;
    display: flex;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    gap: 30px;
    box-sizing: border-box;

first two containers working fine, Third one is not

Answer 1

You can replace your height: 100%; for height: 100vh.

That, or use the option scrollOverflow: false if you do not plan on having scrollable sections.

.container {
    background: red;
    height: 100vh;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}

Online demo