overflow-x делает некоторые изображения SVG липкими и портит анимацию - PullRequest
Новая
       19

overflow-x делает некоторые изображения SVG липкими и портит анимацию

0 голосов
/ 08 апреля 2020

Я уверен, что есть простое решение, которого я не вижу.

В основном сайт выглядит отлично на мобильном телефоне, но есть много лишних пробелов, которые вы можете прокрутить вправо. Я попытался использовать overflow-x: hidden в div, обертывающем содержимое сайта, и оно работает, но оно выбивает мой текст из баннера моего героя и делает его липким примерно до половины прокрутки.

Я пробовал несколько решений и я все еще чешу голову. Это последнее, что мне нужно до того, как мое портфолио будет завершено, поэтому я просто готов исправить его. Любое понимание было бы очень важно! код ниже.

Редактировать: Все еще не могу исправить это Я пытался позиционировать тело как относительную или абсолютную и относительную помощь, но в верхней части экрана есть большое пустое белое пространство. Я попытался поместить разделы hero и code-intro в контейнеры, а также безрезультатно их позиционирование, но безрезультатно.

Вот актуальный сайт портфолио для демонстрационных целей

https://austin-lee-portfolio-01.web.app/

CSS

body {
  margin: 0 auto;
  font-family: "Red Hat Display", sans-serif;
  background-color: rgb(243, 243, 243);
  overflow-x: hidden;
}

.hero {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
}

.programmer {
  margin-left: 910px;
  z-index: 5;
}

.code-intro {
  display: inline;
  position: absolute;
  top: 600px;
  left: 130px;
}

.arrow {
  display: inline;
  position: absolute;
  bottom: 308px;
  left: 173px;
}
.r-arrow {
  display: inline;
  position: absolute;
  top: 782px;
  left: 790px;
}

h1,
h3 {
  position: relative;

  margin-bottom: 20px;
}

h1 {
  font-size: 96px;
  margin-left: 80px;
  margin-bottom: 40px;
  font-weight: lighter;
}

h3 {
  font-size: 48px;
  margin-left: 80px;
  font-weight: 400;
}

ul {
  margin-top: 50px;
  display: flex;
}

li {
  text-align: center;
  list-style-type: none;
  display: inline;
  margin-left: 65px;
}

.line-break {
  margin: 100px auto 10px auto;
  display: block;
}

.line-two {
  margin: 0 auto;
  display: block;
}

.ellipse {
  position: relative;
  margin-left: 10px;
  bottom: 300px;
}

.text {
  position: absolute;
  left: 40%;
  top: 0;
  text-align: center;
  font-size: 30px;
  width: 911px;
  height: 867px;
}

.box {
  position: relative;
  display: inline-block;
}

.history {
  position: absolute;
  top: 40px;
  left: 7.5%;
}

.about {
  margin-top: 70px;
}

.cloud-right {
  position: absolute;
  right: 0;
  top: 0;
}

.projects {
  margin-top: 200px;
  position: relative;
}

.project-tag {
  position: absolute;
  bottom: 280px;
  left: 30px;
}

.project-link {
  display: block;
  color: rgba(0, 0, 0, 0);
  width: 450px;
  height: 250px;
  background-position: center;
  background-size: cover;
  background-repeat: space;
  opacity: 1;
  transition: 1s ease all;
}

.project-link:hover {
  opacity: 0.5;
  color: rgb(255, 255, 255);
}

.project-holder {
  position: relative;
  left: 700px;
  bottom: 700px;
  height: 200px;
}

.flex {
  display: flex;
  flex-direction: column;
}

.flex li {
  margin-bottom: 50px;
}

.weather {
  background-image: url(./assets/weather.svg);
}

.movieflix {
  background-image: url(./assets/movieflix.svg);
}

.nutrition {
  background-image: url(./assets/nutrition.svg);
}

.bootstrap {
  background-image: url(./assets/bootstrap.svg);
}

.contact-section {
  position: relative;
}

.contact-header {
  margin-left: 230px;
}

.contact-img {
  margin-left: 10px;
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

.contact {
  position: absolute;
  right: 30px;
  top: 0;
  line-height: 80px;
}

@media (max-width: 770px) {
  body {
    overflow-x: hidden;
  }

  h1 {
    font-size: 33px;
    margin-left: 20px;
    margin-top: 20px;
  }
  h3 {
    font-size: 25px;
    margin-top: 70px;
    margin-left: 8px;
  }
  .programmer {
    width: 260px;
    margin-left: 2px;
    position: relative;
    top: 160px;
  }

  .code-intro {
    position: absolute;
    top: 130px;
    left: 2px;
    font-size: 17px;
  }
  .arrow {
    position: absolute;
    top: 206px;
    left: 0;
    width: 8px;
  }

  .r-arrow {
    position: absolute;
    top: 248px;
    left: 215px;
    width: 17px;
  }

  ul {
    padding-left: 10px;
  }

  li {
    margin-left: 1px;
  }

  .languages {
    margin-top: 220px;
    margin-bottom: 30px;
  }

  .language-icon {
    width: 50px;
  }

  .line-break {
    margin: 30px;
  }

  .about {
    margin-top: 15px;
  }

  .about-img {
    width: 420px;
  }

  .box {
    position: relative;
  }
  .info {
    margin-top: 30px;
    margin-left: 30px;
    width: 300px;
  }

  .text {
    font-size: 14px;
    position: absolute;
    top: 140px;
    left: 20px;
  }

  .history {
    font-size: 25px;
    margin-top: 0;
    position: absolute;
    top: 35px;
    left: 120px;
  }

  .project-tag {
    position: absolute;
    bottom: 180px;
  }

  .abstract {
    width: 400px;
  }

  .box {
    margin-top: 10px;
  }

  .cloud-right img {
    width: 200px;
    margin-right: 0;
    position: relative;
    bottom: 850px;
    left: 60px;
  }

  .contact-header {
    margin-left: 10px;
  }

  .contact-img {
    width: 370px;
    margin-left: 0;
    position: absolute;
    top: 380px;
  }

  .contact {
    margin: 0;
    line-height: 0;
    left: 0;
  }

  .contact h3 {
    font-size: 20px;
    margin-left: 8px;
    margin-top: 90px;
  }

  .ellipse {
    width: 50px;
    z-index: 0;
    position: relative;
    bottom: 600px;
  }

  .project-holder {
    left: 70px;
    bottom: 0;
    margin-bottom: 300px;
    z-index: 10;
  }

  .project-link {
    width: 200px;
    height: 150px;
  }

  .line-break {
    width: 300px;
  }

  .line-two {
    margin-top: 200px;
    width: 397px;
  }

  .contact-section {
    margin-top: 110px;
  }
}

HTML 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Red+Hat+Display:400,700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <title>Austin Lee Portfolio</title>
  </head>
  <body>
    <section>
      <div class="container">
        <img class="hero" src="assets/Hero.svg" width="100%" />
        <h1>Hello</h1>
        <h3>And Welcome To My Portfolio</h3>
      </div>
    </section>
    <section>
      <img src="assets/Larrow.svg" class="arrow" />
      <h3 class="code-intro">
        Austin &ensp;age="27"<br />
        &emsp;&emsp;&emsp;&nbsp; gender="M"<br />
        &emsp;&emsp;&emsp;&ensp;location="Asheville"
      </h3>
      <img src="assets/Rarrow.svg" class="r-arrow" />
      <img class="programmer" src="assets/Programmer.svg" />
    </section>
    <section class="languages">
      <ul>
        <div data-aos="fade-up" data-aos-duration="3000">
          <li><img class="language-icon" src="assets/html-5.svg" /></li>
        </div>
        <div data-aos="fade-down" data-aos-duration="3000">
          <li><img class="language-icon" src="assets/icons8-css3 1.svg" /></li>
        </div>
        <div data-aos="fade-up" data-aos-duration="3000">
          <li>
            <img class="language-icon" src="assets/icons8-javascript 1.svg" />
          </li>
        </div>
        <div data-aos="fade-down" data-aos-duration="3000">
          <li><img class="language-icon" src="assets/icons8-sass 1.svg" /></li>
        </div>
        <div data-aos="fade-up" data-aos-duration="3000">
          <li><img class="language-icon" src="assets/icons8-react 1.svg" /></li>
        </div>
        <div data-aos="fade-down" data-aos-duration="3000">
          <li>
            <img class="language-icon" src="assets/icons8-bootstrap 1.svg" />
          </li>
        </div>
        <div data-aos="fade-up" data-aos-duration="3000">
          <li><img class="language-icon" src="assets/github-logo 1.svg" /></li>
        </div>
      </ul>
    </section>
    <div data-aos="fade-in" data-aos-duration="3000">
      <img src="assets/Line 6.svg" class="line-break" />
    </div>
    <div data-aos="fade-left" data-aos-duration="3000">
      <section class="about">
        <div class="box">
          <img class="about-img" src="assets/Group 7.svg" />
          <h3 class="history">A Little History</h3>
          <div class="text">
            <p class="info">
              I started my coding journey a little over a year ago.
              <br />
              <br />

              One night I was researching jobs and noticed many listings looking
              for software engineers/programmers. I had never really looked into
              it before so I decided to do some research, and I regret not doing
              so much earlier in my life.
              <br />
              <br />
              Since then I have gotten certificates through Udemy and Coursera,
              as well as done my own research heavily to learn the programming
              languages listed above, as well as others.
              <br />
              <br />
              I’m loyal, dedicated, and always working on some kind of project
              to better my skills. If you have any questions, please don’t
              hesitate to contact me.
            </p>
          </div>
        </div>
      </section>
    </div>
    <section class="projects">
      <div class="box">
        <div data-aos="fade-right" data-aos-duration="3000">
          <img class="abstract" src="assets/Group 9.svg" />
          <div class="project-tag">
            <h1>Projects</h1>
          </div>
        </div>
      </div>
      <div class="cloud-right" data-aos="fade-left" data-aos-duration="3000">
        <img src="assets/Group 8.svg" />
      </div>
    </section>
    <div class="project-holder">
      <ul class="flex">
        <li>
          <div
            data-aos="fade-down"
            data-aos-easing="linear"
            data-aos-duration="1500"
          >
            <a
              class="project-link weather"
              href="https://weather-daily-73798.web.app/"
            ></a>
          </div>
        </li>
        <li>
          <div
            data-aos="fade-down"
            data-aos-easing="linear"
            data-aos-duration="1500"
          >
            <a
              class="project-link movieflix"
              href="https://movie-flix-a8830.web.app/"
            ></a>
          </div>
        </li>
        <li>
          <div
            data-aos="fade-down"
            data-aos-easing="linear"
            data-aos-duration="1500"
          >
            <a
              class="project-link nutrition"
              href="https://nutrition-app-13f92.web.app/"
            ></a>
          </div>
        </li>
        <li>
          <div
            data-aos="fade-down"
            data-aos-easing="linear"
            data-aos-duration="1500"
          >
            <a
              class="project-link bootstrap"
              href="https://bootstrap-demo-b520a.web.app/"
            ></a>
          </div>
        </li>
      </ul>
    </div>
    <img class="ellipse" src="assets/Ellipse 4.svg" />

    <img src="assets/Line 6.svg" class="line-two" />
    <section class="contact-section">
      <div>
        <h1 class="contact-header">Contact Info</h1>
      </div>
      <img class="contact-img" src="assets/undraw_contact_us_15o2 1.svg" />
      <div class="contact">
        <h3>Phone: (850) 630-0655</h3>
        <h3>Email: alee2117@gmail.com</h3>
        <h3>
          GitHub:
          <a href="https://github.com/Alee2117">https://github.com/Alee2117</a>
        </h3>
        <h3>LinkedIn: <a href="#">Coming Soon!</a></h3>
      </div>
    </section>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
      AOS.init();
    </script>
  </body>
</html>
...