БЛОГ НА HUSL


Почему не работаю @media не работает/работает не так как нужно

Автор вопроса: Ruslan Makhmatov

Пытаюсь сделать адаптивный вебсайт и сейчас пришёл к тому, что делаю адаптивность под планшеты, в целом все выглядит так как надо, кроме контейнера для карточек, почему-то именно он использует не те media запросы, что я ставил под его разрешение. ВСкриншот с тем, что получаетсяВозможно я сильно перемудрил с @media. Цвета бордеров добавил временно, чтобы лучше понимать, что происходит. Пишу на реакте + SASS. Буду очень благодарен если поможет.

P.S

вставил только нужную часть кода[Использует @media для width: 1024px, хотя width устройства - 1536px][1]

.secondAppBody {
  background-image: url(/src/images/BG-MAIN.png), linear-gradient(287.56deg, #30CFD0 0%, #330867 100%);
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 300vh;
  margin-top: clamp(100px, 7.8125vw, 200px);
}

.second-screen {
  width: 71.40625%;
  height: auto;
  margin: auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-project-header {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 500;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: clamp(30px, 2.6041666667vw, 70px);
  color: #ffffff;
  margin-top: clamp(50px, 5.2083333333vw, 300px);
  text-transform: uppercase;
}

.glass-div {
  width: clamp(300px, 45.5208333333vw, 974px);
  height: clamp(240px, 21.4583333333vw, 512px);
  background: rgba(217, 217, 217, 0.06);
  box-shadow: 0px 12px 65px rgba(0, 0, 0, 0.25), inset 8.57333px -8.57333px 8.57333px rgba(182, 182, 182, 0.32), inset -8.57333px 8.57333px 8.57333px rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(37.7227px);
  backdrop-filter: blur(37.7227px);
  margin-top: clamp(14px, 1.7708333333vw, 54px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-us-paragraph {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  width: 85.5835240275%;
  font-size: clamp(23px, 2.34375vw, 65px);
  line-height: clamp(33px, 2.7604166667vw, 73px);
  text-align: center;
  color: #ffffff;
  text-transform: capitalize;
}

.blue-txt {
  color: #24CFFF;
  text-decoration: underline;
  transition: 0.2s all;
}

.blue-txt:hover {
  color: #008bfd;
}

.read-more {
  width: clamp(202px, 21.7708333333vw, 505px);
  height: clamp(40px, 3.8020833333vw, 80px);
  background-color: transparent;
  margin-top: clamp(35px, 2.8645833333vw, 75px);
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  border: 2px solid white;
  color: #ffffff;
  font-size: clamp(25px, 2.34375vw, 65px);
  transition: 0.3s all;
}

.read-more:hover {
  border: none;
  background-color: #00cffd;
  box-shadow: 0px 4px 31px 5px rgba(0, 207, 253, 0.9);
}

.cards-container {
  width: clamp(638px, 70.7291666667vw, 1538px);
  height: clamp(240px, 36.2860192102vh, 440px);
  margin-top: clamp(50px, 4.6875vw, 120px);
  display: flex;
  justify-content: space-between;
}

.card-one,
.card-two,
.card-three {
  width: 27.6141384389%;
  height: 100%;
  border: 3px solid white;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(217, 217, 217, 0.06);
  -webkit-backdrop-filter: blur(37.72px);
  backdrop-filter: blur(37.72px);
  transition: 0.3s all;
}

.card-one:hover,
.card-two:hover,
.card-three:hover {
  border: 3px solid #24CFFF;
  box-shadow: 0px 4px 40px 10px rgba(0, 174, 223, 0.8);
}

.card-two {
  border: 3px solid #24CFFF;
  box-shadow: 0px 10px 26px rgba(0, 0, 0, 0.25);
}

.card-one-header,
.card-two-header,
.card-three-header {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-size: clamp(25px, 2.0833333333vw, 50px);
  text-align: center;
  text-transform: uppercase;
  color: #24CFFF;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: clamp(13px, 1.1979166667vw, 33px);
}

.icon-1,
.icon-2,
.icon-3 {
  margin-right: clamp(8px, 0.7291666667vw, 24px);
}

.card-one-text,
.card-two-text,
.card-three-text {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  width: 77.0666666667%;
  height: auto;
  margin-top: -15px font-size: clamp(21px, 1.71875vw, 43px);
  text-align: center;
  color: #ffffff;
  text-transform: capitalize;
}

@media screen and (max-width: 2570px) {
  .glass-div {
    width: 950px;
    height: 620px;
  }
  .cards-container {
    height: 490px;
    border: 2px solid red;
  }
}

@media screen and (max-width: 2058px) {
  .glass-div {
    width: 500px;
    height: 225px;
  }
}

@media screen and (max-width: 1930px) {
  .cards-container {
    height: 335px;
    border: 2px solid orange;
  }
  .glass-div {
    width: 760px;
    height: 425px;
  }
}

@media screen and (max-width: 1910px) {
  .cards-container {
    height: 305px;
    border: 2px solid yellow;
  }
}

@media screen and (max-width: 1640px) {
  .cards-container {
    height: 300px;
    border: 2px solid green;
  }
  .glass-div {
    width: 600px;
    height: 380px;
  }
  .about-us-paragraph {
    font-size: 36px;
  }
}

@media screen and (max-width: 1536px) {
  .secondAppBody {
    margin-top: 50px !important;
  }
  .glass-div {
    width: 420px;
  }
  .cards-container {
    height: 235px;
    border: 2px solid lightblue;
  }
  .cards-container .card-one-text,
  .cards-container .card-two-text,
  .cards-container .card-three-text {
    font-size: 21px;
  }
}

@media screen and (max-width: 1440px) {
  .glass-div {
    width: 520px;
    height: 320px;
    border: 2px solid blue;
  }
  .about-us-paragraph {
    font-size: 31px;
  }
  .card-one-text,
  .card-two-text,
  .card-three-text {
    font-size: 24px;
  }
}

@media screen and (max-width: 1376px) {
  .card-one-text,
  .card-two-text,
  .card-three-text {
    font-size: 24px;
  }
  .glass-div {
    width: 520px;
    height: 270px;
  }
  .about-us-paragraph {
    font-size: 29px;
  }
}

@media screen and (max-width: 1290px) {
  .cards-container {
    height: 270px;
    border: 2px solid black;
  }
}

@media screen and (max-width: 1060px) {
  .cards-container {
    height: 245px;
    border: 2px solid gold;
  }
}

@media screen and (max-width: 1024px) {
  .cards-container {
    height: 245px;
    border: 2px solid magenta;
  }
  .read-more {
    width: 250px;
    height: 45px;
  }
}


/*# sourceMappingURL=about-styles.css.map */
<div class="secondAppBody">
  <div class="second-screen">
    <h2 class="about-project-header">About Project</h2>
    <figure class="separator-2"></figure>
    <div class="glass-div">
      <p class="about-us-paragraph">
        This Project Was Created In Order To Show the basics of the neural networks and machine learning, through the chatting way. To put it more simply, you can create <span class="blue-txt">your own AI</span> and train it just with chatting
      </p>
    </div>
    <button class="read-more">READ MORE</button>
    <section class="cards-container">
      <article class="card-one">
        <h3 class="card-one-header">

          STEP 1
        </h3>

        <p class="card-one-text">
          first of all, you should create and name your aI and then make only then make a chat
        </p>
      </article>
      <article class="card-two">
        <h3 class="card-two-header">

          STEP 2
        </h3>

        <p class="card-two-text">
          Now you can train Your AI, Just chatting with it. the more you chatting - the smarter aI Is
        </p>
      </article>
      <article class="card-three">
        <h3 class="card-three-header">

          STEP 3
        </h3>

        <p class="card-three-text">
          Share your own neural network with friends and other users, have fun and enjoy it!
        </p>
      </article>
    </section>
  </div>
</div>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.