Похоже, мой медиа-запрос не меняет размер шрифта - PullRequest
Новая
       14

Похоже, мой медиа-запрос не меняет размер шрифта

1 голос
/ 20 апреля 2020

Я делаю веб-сайты, где я столкнулся с проблемой. Когда я использую медиа-запрос, он не меняет размер шрифта. Я прочитал несколько советов и похожих проблем, но единственное, что сработало, - это важно! Тем не менее, это известно как плохая практика, поэтому я хочу избегать ее использования. Поэтому я пытаюсь решить мою проблему по-другому. (я предполагаю, что идентификатор обеспечивает большую специфичность) 

#about-us {
  height: 100vh;
  align-content: space-evenly;
  .flex__one {
    flex: 1 0 30%;
    align-self: center;
    &>h1 {
      position: relative;
      left: 92px;
    }
  }
  .flex__text--main {
    font-size: 4.2rem;
    font-weight: bold;
  }
  .flex__text--sub {
    font-size: 2.45rem;
    font-weight: normal;
    max-width: 68%;
    line-height: 1.4;
  }
  .flex__two {
    overflow: hidden;
    flex: 2 0 40%;
  }
  .flex__three {
    text-align: flex-end;
    flex: 2 0 40%;
    &>img {
      position: relative;
      left: 13%;
      width: 25%;
      padding-right: 2rem;
    }
  }
  .flex__four {
    flex: 2 0 20%;
    &>h1 {
      //left:10px;
    }
    .flex__text--main {
      max-width: 62%;
      min-width: 43%;
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }
    .flex__text--sub {}
  }
}

@media only screen and (max-width: 1293px) {
  .flex__text--main {
    font-size: 2rem !important;
    color: red;
  }
  .flex__text--sub {
    font-size: calc(2.45rem / 2); // not sure if I can do this 
  }
}

@media only screen and (max-width: 1559px) {
  .container {
    width: 90%;
  }
}
<div id="about-us" class="container flex">
  <div class="flex__one">
    <h1 class="flex__text--main">BUĎ ORIGINÁLNÍ</h1>
    <h1 class="flex__text--sub">S DŘEVENÝM DOPLŇKEM NEBUDEŠ NIKDY DŘEVO</h1>
  </div>
  <div class="flex__two">
    <img src="images/wood-carving2.png" alt="carving" class="wood__carving-img">
  </div>

  <div class="flex__three">
    <img class="flex-element" src="images/domaci vyroba.svg" alt="homemade">
    <img class="flex-element" src="images/vyrobeno v cr.svg" alt="czech">
    <img class="flex-element" src="images/vytvoreno s laskou.svg" alt="withlove">
  </div>
  <div class="flex__four">

    <h1 class="flex__text--main">DŘEVO PRO NÁS ZNAMENÁ HODNĚ</h1>
    <h1 class="flex__text--sub">TAKŽE HO POUŽÍVÁME JEN NA TY NEJFAJNOVĚJŠÍ VÝROBKY PRO VÁS</h1>
  </div>
</div>
...