OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I get rid of the gap between divs caused by display flex?

  • Thread starter Thread starter user25618867
  • Start date Start date
U

user25618867

Guest
Here's what it looks like in visual code
Here's what it looks like in visual code

I keep getting a gap between my container and pages divs, I can get rid of it by removing display:flex from the css, but that misaligns the video, overlay and content. How can I get rid of the gap without throwing everything off?


Code:
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 100vw;
    height: 100vh;
    background-color: #292626;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: transparent;
}
.container .content{
    opacity: 0.75;
    margin-bottom: -100px;
}

.overlay{
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0.4;
    right: 0;
    bottom: 0;
    z-index: -1;
}

body{
    font-family: 'MontFont', sans-serif;
    height: 100vh;
    width: 100vw;
    margin: 0rem;
}

.Holmes1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.Park1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.ContactME1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.Pages{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}
section{
    height: 100vh;
    display: flex;
    scroll-snap-align: start;
    margin-top: -4px;
}
.Holmespage{
    background-color: #373333;
}
.Parkpage{
    background-color: #292626;
}

Code:
<div class="container">
    <div class="overlay"></div>
    <div class="content">
      <h1>Test</h1>
    </div>
  </div>
  <div class="Pages">
    <section class="Holmespage">
        <div class="Holmes1">HOLMES</div>
    </section>
    <section class="Parkpage">
        <div class="Park1">PARK</div>
    </section>
    <section class="Contactpage">
        <div class="ContactME1">CONTACT</div>
    </section>
  </div>

I've tried to change the margin to 0, negative and positive amounts, including trying on the top and bottom margin separately, not sure if it's cause I'm not applying it to the right place. Also tried to use Display: flex box but that didn't work, and using flex: 1
<p><strong>Here's what it looks like in visual code</strong><br />
<img src="https://i.sstatic.net/z1FmUTP5.jpg" alt="Here's what it looks like in visual code " /><br />
I keep getting a gap between my container and pages divs, I can get rid of it by removing display:flex from the css, but that misaligns the video, overlay and content. How can I get rid of the gap without throwing everything off?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100vw;
height: 100vh;
background-color: #292626;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: transparent;
}
.container .content{
opacity: 0.75;
margin-bottom: -100px;
}

.overlay{
position: absolute;
height: 100vh;
width: 100vw;
background-color: black;
opacity: 0.4;
right: 0;
bottom: 0;
z-index: -1;
}

body{
font-family: 'MontFont', sans-serif;
height: 100vh;
width: 100vw;
margin: 0rem;
}

.Holmes1{
writing-mode: vertical-lr;
font-size: 5em;
font-weight: 950;
color: #fff;
text-align: center;
mix-blend-mode:
difference;
}
.Park1{
writing-mode: vertical-lr;
font-size: 5em;
font-weight: 950;
color: #fff;
text-align: center;
mix-blend-mode:
difference;
}
.ContactME1{
writing-mode: vertical-lr;
font-size: 5em;
font-weight: 950;
color: #fff;
text-align: center;
mix-blend-mode:
difference;
}
.Pages{
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
section{
height: 100vh;
display: flex;
scroll-snap-align: start;
margin-top: -4px;
}
.Holmespage{
background-color: #373333;
}
.Parkpage{
background-color: #292626;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container">
<div class="overlay"></div>
<div class="content">
<h1>Test</h1>
</div>
</div>
<div class="Pages">
<section class="Holmespage">
<div class="Holmes1">HOLMES</div>
</section>
<section class="Parkpage">
<div class="Park1">PARK</div>
</section>
<section class="Contactpage">
<div class="ContactME1">CONTACT</div>
</section>
</div></code></pre>
</div>
</div>
</p>
<p>I've tried to change the margin to 0, negative and positive amounts, including trying on the top and bottom margin separately, not sure if it's cause I'm not applying it to the right place. Also tried to use Display: flex box but that didn't work, and using flex: 1</p>
Continue reading...
 

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top