Смена расположений блоков при уменьшении ширины окна браузера

Question

Смена расположений блоков при уменьшении ширины окна браузера

Рейтинг: 0Ответов: 0Опубликовано: 05.05.2023

Всем привет. Не могу понять, почему у меня при сужении экрана опрокидывается на высший блок и так пока не достигнет хедера. То есть, перекидывает ровно на начало предыдущего блока. Когда я нахожусь на середине страницы и начинаю сужать окно браузера, оно на брейкпоинте в 767px начинает начинает перебрасывать на блок который был перед этим, допустим у меня экран был на секшн скилс, потом я начал сужать экран на 767 px и я уже нахожусь экраном выше на дескрипшн секшн. Может, кто-то уже сталкивался с такой неудачей?[![введите сюда описание изображения][1]][1]

const iconMenu = document.querySelector('.header__burger');
const iconNav = document.querySelector('.header__nav');
if (iconMenu) {
  iconMenu.addEventListener('click', function(e) {
    iconMenu.classList.toggle('active');
    document.body.classList.toggle('lock');
    iconNav.classList.toggle('active');
  });
}

const menuLinks = document.querySelectorAll('.header__text[data-scroll]');
if (menuLinks.length > 0) {
  menuLinks.forEach(menuLink => {
    menuLink.addEventListener('click', onMenuLinkClick)
  });

  function onMenuLinkClick(e) {
    const menuLink = e.target;
    if (menuLink.dataset.scroll && document.querySelector(menuLink.dataset.scroll)) {
      const scrollBlock = document.querySelector(menuLink.dataset.scroll);
      const scrollBlockValue = scrollBlock.getBoundingClientRect().top + pageYOffset - document.querySelector('header').offsetHeight;

      if (iconMenu.classList.contains("active")) {
        document.body.classList.remove('lock');
        iconMenu.classList.remove('active');
        iconNav.classList.remove('active');
      }

      window.scrollTo({
        top: scrollBlockValue,
        behavior: 'smooth'
      });
      e.preventDefault();
    }
  }

@import 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap';
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ul[class],
ol[class] {
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

ul[class],
ol[class] {
  list-style: none;
  text-decoration: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.animation-img {
  opacity: 0;
  -webkit-animation: fontimg 1s linear forwards;
  animation: fontimg 1s linear forwards;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

@-webkit-keyframes fontimg {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes fontimg {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.animation-right {
  opacity: 0;
  -webkit-animation: slideright 1.5s ease forwards;
  animation: slideright 1.5s ease forwards;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

@-webkit-keyframes slideright {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@keyframes slideright {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

.animation-job {
  opacity: 0;
  -webkit-animation: job 1.6s ease forwards;
  animation: job 1.6s ease forwards;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

@-webkit-keyframes job {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes job {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.animation-x {
  opacity: 0;
  -webkit-animation: title 1.6s ease forwards;
  animation: title 1.6s ease forwards;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

@-webkit-keyframes title {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes title {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.animation {
  opacity: 0;
  -webkit-animation: appearnav 0.5s ease forwards;
  animation: appearnav 0.5s ease forwards;
  -webkit-animation-delay: calc(0.2s * var(--i));
  animation-delay: calc(0.2s * var(--i));
}

@-webkit-keyframes appearnav {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10em);
    transform: translateY(10em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes appearnav {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10em);
    transform: translateY(10em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

:root {
  --inset-top: 0;
  --inset-right: 0;
  --inset-bottom: 100%;
  --inset-left: 0;
}

html,
body {
  min-width: 320px;
  font-family: "Gilroy Medium";
  height: 100%;
  font-family: "Open Sans", sans-serif;
}

.wrapper {
  max-width: 100%;
  overflow: hidden;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.fullscreen {
  min-height: 100vh;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 50;
}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 2;
}

.container {
  max-width: 950px;
  margin: 0 auto;
  padding: 0 10px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.header__burger {
  display: none;
}

.header__body {
  position: relative;
  height: 87px;
}

.header__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  top: 32px;
  padding-bottom: 5px;
  position: relative;
  z-index: 2;
}

.header__text {
  font-size: 18px;
  line-height: 133.3333333333%;
  color: #828282;
}

.header__text:hover {
  color: #000000;
}

.text_bold {
  font-size: 18px;
  line-height: 122.2222222222%;
  color: #070707;
  font-weight: bold;
}

.header__container {
  border-bottom: 1px solid #070707;
  position: relative;
  z-index: 4;
}

@media (max-width: 800px) {
  body.lock {
    overflow: hidden;
  }
  .header__burger {
    display: block;
    margin-left: auto;
    right: 0;
    -webkit-transform: translateY(70%);
    transform: translateY(70%);
    width: 40px;
    height: 20px;
    position: relative;
    z-index: 3;
  }
  .header__burger::before,
  .header__burger::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: rgb(0, 0, 0);
    left: 0;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
  }
  .header__burger::before {
    top: 0;
  }
  .header__burger::after {
    bottom: 0;
  }
  .header__burger span {
    position: absolute;
    width: 100%;
    height: 3px;
    top: 8.5px;
    left: 0;
    background-color: #000000;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
  }
  .header__body {
    height: 50px;
  }
  .header__nav {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    padding: 40px 20px 10px 20px;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    overflow: auto;
  }
  .header__nav.active {
    top: 0;
  }
  .header__items {
    display: block;
    text-align: right;
  }
  .header__list {
    margin: 0 0 20px 0;
  }
  .header__text {
    font-size: 2.125rem;
    line-height: 124.02%;
    color: #828282;
  }
  .header__text.text_bold {
    color: black;
  }
  .header__burger.active::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 9px;
  }
  .header__burger.active::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 9px;
  }
  .header__burger.active span {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  .header__container {
    border-bottom: none;
  }
}

.about {
  padding: 140px 0 105px;
  position: relative;
}

@media (max-width: 767px) {
  .about {
    padding: 60px 0 0 0;
  }
}

.about__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  padding: 0 0 30px 0;
}

@media (max-width: 767px) {
  .about__row {
    row-gap: 20px;
  }
}

.about__title {
  font-size: 47.3392px;
  line-height: 124.6324399229%;
  color: #070707;
  width: 6%;
  font-weight: bold;
}

@media (max-width: 767px) {
  .about__title {
    font-size: 2.2875rem;
    width: 5.582em;
  }
}

@media (max-width: 321px) {
  .about__title {
    font-size: 2.1rem;
  }
}

.about__job {
  font-size: 18px;
  line-height: 122.2222222222%;
  color: #070707;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

.about__lang {
  -webkit-writing-mode: tb-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: tb-rl;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .about__lang {
    display: none;
  }
}

.about__lang a {
  font-size: 16px;
  line-height: 125%;
  color: #828282;
}

.lang__eng {
  padding-top: 4px;
}

.about__lang a:hover,
.about__lang a:focus {
  color: #000000;
}

.lang__eng::before {
  content: "";
  border-bottom: 1.5px solid #000000;
  position: relative;
  bottom: 6%;
}

.about__image {
  height: 380px;
  overflow: hidden;
}

.about__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 0px -280px fixed;
  object-position: 0px -280px fixed;
}


/*    -----------------------------------------   */

.description {
  width: 100%;
  background-color: #F6F6F6;
  padding: 120px 0 107px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%);
  clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%);
}

.description__column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.description__title {
  font-size: 34px;
  font-weight: bold;
  line-height: 123.5294117647%;
  text-align: center;
  color: #070707;
  padding: 0 0 18px 0;
}

.description__paragraph {
  text-align: center;
  width: 51.0526315789%;
  margin: 0 auto;
}

.description__paragraph p:not(:last-child) {
  margin: 0 0 50px 0;
}

.description__text {
  font-size: 18px;
  line-height: 122.2222222222%;
  text-align: center;
  color: #070707;
}

@media (max-width: 768px) {
  .description__paragraph {
    width: 80%;
  }
}

@media (max-width: 480px) {
  .description__paragraph {
    width: 99%;
  }
}


/* -----------------------------------------------*/

.skills {
  padding: 91px 0 110px;
}

.skills__title {
  font-size: 2.125rem;
  line-height: 1.24em;
  text-align: center;
  color: #070707;
  font-weight: bold;
  margin: 0 0 2.03em 0;
}

.skills__subtitle {
  font-size: 1.125rem;
  line-height: 1.222em;
  text-align: center;
  color: #070707;
  margin: 0 0 4.56em 0;
}

.skills__cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 80px;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

@media (max-width: 375px) {
  .skills__cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.skills__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.programs__img {
  margin: 0 0 1.5em 0;
}

.programs__img img {
  width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 90px;
  flex: 0 1 90px;
}

.text {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-size: 0, 875rem;
  line-height: 1, 214em;
  text-align: center;
  color: #828282;
}

.programs__text {
  margin: 0 0 2.96em 0;
}


/* ---------------------------- */

.portfolio {
  padding: 113px 0 96px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #F6F6F6;
  -webkit-clip-path: polygon(0 1%, 100% 0, 100% 99%, 0 100%);
  clip-path: polygon(0 1%, 100% 0, 100% 99%, 0 100%);
}

.portfolio__title {
  font-size: 2.125rem;
  line-height: 1.24em;
  text-align: center;
  color: #070707;
  font-weight: bold;
  margin: 0 0 1.382em 0;
}

.portfolio__img:not(:last-child) {
  margin: 0 0 6.188em 0;
}

.portfolio__text {
  font-size: 1.125rem;
  line-height: 1.222em;
  text-align: center;
  color: #070707;
}

.portfolio__img p {
  margin: 2.5em 0 0 0;
}


/*-----------------------------------*/

.basement {
  padding: 114px 0 123px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.basement__column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.basements__contacts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.contacts {
  margin: 0 0 5.3125em 0;
}

.contacts__title {
  font-size: 2.125rem;
  line-height: 1.24em;
  text-align: center;
  color: #070707;
  font-weight: bold;
  margin: 0 0 0.59em 0;
}

.contacts__text p {
  font-size: 1.125rem;
  line-height: 1.222em;
  text-align: center;
  color: #070707;
}

.contacts__text {
  margin: 0 0 1.875em 0;
}

.contacts__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}



.basement_find {
  font-family: "Gilroy-Medium";
  font-size: 0.875rem;
  line-height: 1.214;
  text-align: center;
  color: #828282;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/style.css">

  <title>Portfolio</title>
</head>

<body class="body">
  <div class="wrapper">
    <div class="fullscreen">
      <header class="header ">
        <div class="header__container container">
          <div class="header__body">
            <nav class="header__nav">
              <ul class="header__items">
                <li class="header__list animation" style="--i:1"><a data-scroll=".about_1" class="header__text text_bold" href="#">Home</a></li>
                <li class="header__list animation" style="--i:2"><a data-scroll=".description_1" class="header__text" href="#">About me</a></li>
                <li class="header__list animation" style="--i:3"><a data-scroll=".skills_1" class="header__text" href="#">Skills</a></li>
                <li class="header__list animation" style="--i:4"><a data-scroll=".portfolio_1" class="header__text" href="#">Portfolio</a></li>
                <li class="header__list animation" style="--i:5"><a data-scroll=".basement_1" class="header__text" href="#">Contacts</a></li>
              </ul>
            </nav>
            <div class="header__burger">
              <span></span>
            </div>
          </div>
        </div>
      </header>
      <main class="main">
        <section class="about about_1">
          <div class="container">
            <div class="about__row">
              <div class="about__title animation-x">
              </div>
              <div class="about__job animation-job">

              </div>
              <div class="about__lang lang animation-right">
                <a class="lang__ua" href="#"> UA </a>
                <a class="lang__eng" href="#">ENG</a>
              </div>
            </div>
            <div class="about__image animation-img">
              <img src="./img/photo_5194970353233937100_y.jpg" alt="Error">
            </div>
          </div>
        </section>
    </div>
    <section class="description description_1">
      <div class="skew">
      </div>
      <div class="container">
        <div class="descripton__column">
          <div class="description__title">
            About me
          </div>
          <div class="description__paragraph">
            <p class="description__text">Hi, i'm - beginner Frontend Developer. I'm interested in programming and everything connected with it.</p>
            <p class="description__text">I'm studying at courses "The Complete 2023 Web Development Bootcamp" on Udemy.
            </p>
            <p class="description__text">
              Ready to implement excellent projects with wonderful people.
            </p>
          </div>
        </div>
      </div>
    </section>
    <section class="skills skills_1">
      <div class="container">
        <div class="skills__title">
          Skills
        </div>
        <div class="skills__subtitle">
          I work in such programs as
        </div>
        <div class="skills__row">
          <div class="skills__cards">
            <div class="skills__body programs">
              <div class="programs__img">
                <img src="./img/PS.svg" alt="">
              </div>
              <div class="programs__text text">
                <p class="programs__name"> HTML</p>
              </div>
              <div class="programs__stars">
                <img src="./img/Group 2.svg" alt="">
              </div>
            </div>
            <div class="skills__body programs">
              <div class="programs__img">
                <img src="./img/AI.svg" alt="">
              </div>
              <div class="programs__text text">
                <p class="programs__name">CSS</p>
              </div>
              <div class="programs__stars">
                <img src="./img/Group 2.svg" alt="">
              </div>
            </div>
            <div class="skills__body programs">
              <div class="programs__img">
                <img src="./img/AE.svg" alt="">
              </div>
              <div class="programs__text text">
                <p class="programs__name">Java<br>Script</p>
              </div>
              <div class="programs__stars">
                <img src="./img/Group 2.svg" alt="">
              </div>
            </div>
            <div class="skills__body programs">
              <div class="programs__img">
                <img src="./img/AI.svg" alt="">
              </div>
              <div class="programs__text text">
                <p class="programs__name"> Git<br>GitHub</p>
              </div>
              <div class="programs__stars">
                <img src="./img/Group 2.svg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="portfolio portfolio_1">
      <div class="container">
        <div class="portfolio__title">
          Portfolio
        </div>
        <div class="portfolio__img">
          <img src="./img/Shot.JPG" alt="#">
          <p class="portfolio__text">Subscription business - landing page</p>
        </div>
        <div class="portfolio__img">
          <img src="./img/Снимок.JPG" alt="#">
          <p class="portfolio__text">Qubit - landing page</p>
        </div>
        <div class="portfolio__img">
          <img src="./img/webstudio.PNG" alt="#">
          <p class="portfolio__text">Outsourcing company - project</p>
        </div>
      </div>
    </section>
    <section class="basement basement_1">
      <div class="container">
        <div class="basement__column">
          <div class="basements__contacts contacts">
            <div class="contacts__title">
              Contacts
            </div>
            <div class="contacts__text">
              <p>Want to know more or just chat? <br> You are welcome!</p>
            </div>
            <div class="contacts__button">
              <a href="" class="wave-btn">
                <span class="wave-btn__text">Send message</span>
                <span class="wave-btn__waves"></span>
              </a>
            </div>
          </div>
          <div class="basement__icons">
            <a href="https://www.linkedin.com/in/vadim-serapionov-1a582a17b/" target="_blunk"><img src="./img/Group 2 (1).svg" alt=""></a>
            <a href="https://www.instagram.com/dania0077/" target="_blunk"><img src="./img/Group 8.svg" alt=""></a>
          </div>
          <p class="basement_find">
            Like me on <br> LinkedIn, Instagram, Telegram, GitHub
          </p>
        </div>
      </div>
    </section>
    </main>
  </div>
  <!-- <script src="./jquery/jquery.js"></script> -->`введите сюда код`
  <script src="./js/script.js"></script>
</body>

</html>

css javascript html

Источник: Stack Overflow на русском

Смена расположений блоков при уменьшении ширины окна браузера

Ответы