时间戳

首页 > 解决方案 > 如何在我的网站中删除我的 svg 下方的这个小空间？

html - 如何在我的网站中删除我的 svg 下方的这个小空间？

问题描述

我有一个正在构建的网站模板，并且第一次想尝试一些很酷的部分分隔符。我正在使用ShapeDivider App，它工作得很好，直到我在 Chrome 开发人员工具中进入特定的宽度或分辨率，因为我试图让它对移动设备友好。在 iPad 尺寸部分，我在 svg 下方得到一个奇怪的小空间，我不知道如何修复，我一直在浏览有关此事的 0 帮助。显示设置为块，这是我一直在阅读的唯一建议。这是我的代码：

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  margin: 0;
}

/* NAVIGATION */
#octo-logo {
  width: 190px;
}

.nav-item {
  font-family: 'Poppins', sans-serif;
  margin-right: 30px;
  font-size: 18px;
}

/* END NAVIGATION */
/* HERO */
.hero {
  background-image: url("img/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 800px;
  position: relative;
  background-position: 50% 30%;
}

.hero-message {
  padding-top: 160px;
}

.hero-message h1 {
  color: #194859;
  font-weight: 700;
  font-size: 60px;
  padding-bottom: 20px;
}

.hero-message p {
  font-size: 20px;
  margin-top: 20px;
}

.hero-message span {
  color: rgb(49, 110, 106);
}

.hero button {
  padding: 10px 20px;
  background-color: #FFAD5C;
  color: white;
  font-weight: 700;
  margin-top: 20px;
  font-size: 16px;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
}

#coral2 {
  width: 100px;
  position: absolute;
  right: 0;
}

#coral1 {
  width: 130px;
  position: absolute;
  bottom: 60px;
}

.custom-shape-divider-bottom-1600301955 {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1600301955 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100px;
}

.custom-shape-divider-bottom-1600301955 .shape-fill {
  fill: #FFFFFF;
}

/* END HERO */
/* MEDIA QUERIES */
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
  .hero-message h1 {
    font-size: 45px;
  }

  #coral1, #coral2 {
    display: none;
  }

  .hero-message p {
    font-size: 18px;
    margin-top: 10px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
  .hero {
    background-image: url("img/phonebg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 60% 80%;
  }

  .hero-message {
    text-align: center;
    padding-top: 60px;
  }

  .hero-message p {
    display: none;
  }
  .custom-shape-divider-bottom-1600301955 svg {
    display: none;
  }
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {

}
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <title>OctoDent</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <!-- Font-awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>

<body>
  <!-- NAVIGATION -->
  <nav class="navbar navbar-expand-md navbar-dark" style="background-color: #3E96B1;">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="container">
      <!-- NAV CONTENT -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <img id="octo-logo" src="img/logo.png" alt="">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About Us <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Gallery <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact Us<span class="sr-only">(current)</span></a>
          </li>
      </div>
      </li>
      </ul>
      <!-- END NAV CONTENT -->
    </div>
  </nav>
  <!-- END NAVIGATION -->
  <!-- HERO -->
  <section class="hero">
    <img id="coral1" src="img/coral1.png" alt="">
    <img id="coral2" src="img/coral2.png" alt="">
    <div class="container">
      <div class="hero-message">
        <h1>A Brighter, Better <br>Dental Experience.</h1>
        <p>
          <span>Whether you need routine dentistry, would like to have <br>cosmetic work completed or require restoriation, we offer a <br> variety of services to suit your needs.</span>
        </p>
        <button class="btn" data-toggle="modal" data-target="#appointment-modal">BOOK AN APPOINTMENT</button>
      </div>
    </div>
    <div class="custom-shape-divider-bottom-1600301955">
      <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
      </svg>
    </div>
  </section>
  <!-- END HERO -->








  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

标签： htmlcss

解决方案

推荐阅读