How do I get rid of the empty spaces between my sections?

Question

I'm having issues removing the empty spaces between my sections. I don't want to specify the exact height of the div for every section so I'm trying to use % instead but some things went wrong and now there are empty spaces between my sections.

jsfiddle

example with two sections

/* SECTION HOME */
#home {
  height: 100% !important;
  display: flex;
}

.sectionhome::before {
  display: block;
  content: " ";
  margin-top: -128px;
  height: 128px;
  visibility: hidden;
  pointer-events: none;
}

#homebild {
  width: 1280px;
  height: 853px;
}

/* SECTION WIR-UEBER-UNS */
#wir-ueber-uns {
  height: 100% !important;
  display: flex;
}

.sectionwir-ueber-uns::before {
  display: block;
  content: " ";
  margin-top: -80px;
  height: 80px;
  visibility: hidden;
  pointer-events: none;
}

#wir-ueber-unsbild {
  width: 1280px;
  height: 853px;
}

Can you provide a working example please? – Sfili_81 Nov 19 '20 at 07:43 — Sfili_81, Nov 19 '20 at 07:43
https://jsfiddle.net/HcJanni/kbhzjdt8/11/ here you go :) – Jannis N Nov 19 '20 at 07:47 — Jannis N, Nov 19 '20 at 07:47

John · Answer 1 · 2020-11-19T08:03:20.903

You can add a negative margin to your section in CSS to squish them together. You will also need to add overflow: hidden; to your #container as well (not just overflow-x) See here:

@charset "utf-8";

/* CSS Document */

/* ALLGEMEINES */
* {
  font-family: "Saira", "Roboto", Segoe UI, Helvetica Neue, Arial, sans-serif;
  box-sizing: border-box;
}

#container {
  max-width: 1280px;
  margin: 0 auto;
   overflow: hidden;
}

body {
  background-color: #d0d0d0;
  margin: 0;
  /*background-image: url("https://i.postimg.cc/9M2xQYcm/Hintergrund.png")*/
}



/* MAIN */

/* SECTION HOME */
#home {
  height: 100% !important;
  display: flex;
  
  /* damit das scrollen richtig funktioniert */
}

.sectionhome::before {
  /* setzt die richtige Höhe damit die Navbar das Bild nicht blockiert */
  display: block;
  content: " ";
  margin-top: -128px;
  height: 128px;
  visibility: hidden;
  pointer-events: none;
  
}

#homebild {
  width: 1280px;
  height: 853px;
}

/* SECTION WIR-UEBER-UNS */
#wir-ueber-uns {
  height: 100% !important;
  display: flex;
}

.sectionwir-ueber-uns::before {
  display: block;
  content: " ";
  margin-top: -80px;
  height: 80px;
  visibility: hidden;
  pointer-events: none;
 
}

#wir-ueber-unsbild {
  width: 1280px;
  height: 853px;
}

section {
  margin: -10px;
}

<!DOCTYPE html>
<html>

  <head>
    <title>OptikTack</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Saira:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  </head>

  <body>
    <div id="container">
      <div class="body">
        <!-- MAIN -->
        <div id="spacer"></div>
        <!-- home section -->
        <section id="home" class="section sectionhome">
          <div>
            <img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild" width="1280px">
          </div>
        </section>
        <!-- home section ende -->
        <!-- wir-ueber-uns section -->
        <section id="wir-ueber-uns" class="section sectionwir-ueber-uns">
          <div>
            <img src="https://i.postimg.cc/FH6RSxbF/Bild-2.jpg" width="1280px" id="wir-ueber-unsbild">
          </div>
        </section>
        <!-- wir-ueber-uns section ende -->
      </div>
    </div>
    <!-- container ende -->
  </body>

</html>

score 1 · Accepted Answer · answered Nov 19 '20 at 08:04

1

Add this style in your CSS

.section div {
    display: inherit;
}

answered Nov 19 '20 at 08:04

54ka

3,501
2
9
24

How do I get rid of the empty spaces between my sections?

2 Answers2