Как нацелить элемент Jumbotron в медиа-запрос? - PullRequest
Новая
       4

Как нацелить элемент Jumbotron в медиа-запрос?

0 голосов
/ 29 апреля 2018

У меня проблемы с изменением размера шрифта моего H1, который находится внутри моего jumbotron, с использованием медиазапроса в моем файле css.

Это мой код jumbotron: 

<div class="jumbotron jumbotron-bike">
  <h1>Get Going</h1>
  <p>Jumpstart your startup with some crowdsourced
    seed money, or support one of our 300,000,000+
    creators and get rewards.</p>
    <a class="btn btn-primary btn-lg"href="#">Jump In</a>
</div>

А это мой CSS: 

    .jumbotron h1{
  font-family: Monoton;
  font-size: 7.1rem;
}

@media only screen and (max-width:480px){
  .jumbotron h1{
    font-size: 5.7rem;
  }
}

Когда я запускаю веб-сайт, размер шрифта H1 не изменяется при изменении размера страницы. Я протестировал медиа-запрос с изменением цвета фона тела, и он работал, так что я думаю, что это как-то связано с тем фактом, что он вложен в jumbotron. Я довольно новичок в веб-разработке, так что это может быть что-то простое, но я не могу найти ответы в Интернете.

1 Ответ

0 голосов
/ 29 апреля 2018

Это, кажется, работает как ожидалось. Проверьте jsfiddle ниже. Я изменил размер шрифта, чтобы он был намного меньше при изменении размера, чтобы легче было видеть изменения в медиа-запросе.

HTML 

<div class="jumbotron jumbotron-bike">
  <h1>Get Going</h1>
  <p>Jumpstart your startup with some crowdsourced
    seed money, or support one of our 300,000,000+
    creators and get rewards.</p>
    <a class="btn btn-primary btn-lg"href="#">Jump In</a>
</div>

CSS 

.jumbotron h1{
  font-family: Monoton;
  font-size: 7.1rem;
}

@media only screen and (max-width:480px){
  .jumbotron h1{
    font-size: 2.7rem;
  }
}

jsfiddle

...