@media не влияет на мой заголовок Jumbotron - PullRequest
Новая
       42

@media не влияет на мой заголовок Jumbotron

0 голосов
/ 19 февраля 2020

Здравствуйте, я только что начал веб-разработку несколько дней go. Я хочу, чтобы заголовок моей веб-страницы был адаптивным, чтобы его ширина, высота и размер шрифта были гибкими. 

<header class="text-white">
<div class="jumbotron bgimg text-white">
  <h1 class="display-4">    
    <i class="fa fas fa-star"></i>
    Hello, World!<i class="fa fas fa-star fa-1x"></i></h1>
  <p class="lead">This is my webpage</p>
  <hr class="my-4">
  <p class="lead">Web page details.</p>
  <a class="btn btn-primary" href="./file.zip" download="" role="button">Download!</a>
</div>

Поэтому я написал такой код, чтобы размер моего письма печатался маленьким шрифтом на маленьком мобильном телефоне. устройство. Моя проблема в том, что он остается прежним, и мое фоновое изображение случайно обрезается. Это потому что я установил display-4 на h1? 

@media (max-width: 400px) {
  #headerh1 {
    width: 100%;
    height: 10%;
    font-size: 2em;
  }
}

Спасибо, что всегда.

Ответы [ 3 ]

1 голос
/ 19 февраля 2020

Селектор #headerh1 {...} должен быть header h1 {...} (без идентификатора, кроме тега, пробел между header и h1)

Если это не выбирает элемент, есть еще более конкретная c css правило в вашем коде, поэтому вам придется увеличить специфичность css, например, записав (обратите внимание на пробелы и "не-пробелы" ...): 

header.text-white div.jumbotron.bgimg.text-white h1.display-4 { ... }
0 голосов
/ 19 февраля 2020

Проблема с простым селектором. Использование 

h1{
    width: 100%;
    height: 10%;
    font-size: 2em;
}

Или 

h1.display-4{
        width: 100%;
        height: 10%;
        font-size: 2em;
    }

или, точнее, 

header h1.display-4{
        width: 100%;
        height: 10%;
        font-size: 2em;
    }

Подробнее о CSS Селекторы

0 голосов
/ 19 февраля 2020

Или, может быть, попробуйте добавить id в заголовок:) 

<header id="headerh1" class="text-white">
...