Медиа-запрос для изображения для работы на рабочем столе и на мобильном телефоне - PullRequest
Новая
       49

Медиа-запрос для изображения для работы на рабочем столе и на мобильном телефоне

0 голосов
/ 21 апреля 2019

У меня есть фоновое изображение на моем веб-сайте, которое отлично работает на рабочем столе, но когда я пытаюсь просмотреть веб-сайт на мобильном устройстве, изображение исчезает. Как я могу это исправить, чтобы он реагировал? Я уже добавил медиа-запрос и пытаюсь исправить это с помощью онлайн-ресурсов, но я не уверен, что мне не хватает. 

@media screen and (min-width: 650px){
  header.page-header {
    text-align: center;
    color: white;
    background-image: url("https://images.pexels.com/photos/1040499/pexels-photo-1040499.jpeg");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100%;
    background-attachment: scroll;
}}

header.page-header .intro {
  padding-top: 100px;
  padding-bottom: 100px;
}

header.page-header .intro p {
  font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 25px;
}

header.page-header .intro h1 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 25px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  header.page-header .intro {
    padding-top: 200px;
    padding-bottom: 200px;
  }
  
  header.page-header .intro p {
    font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 25px;
  }
  
  header.page-header .intro h1 {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 65px;
    font-weight: 700;
    line-height: 75px;
    margin-bottom: 50px;
    text-transform: uppercase;
  }
}
<header class="page-header">
  <div class="container">
    <div class="intro">
      <p>Hello.</p>
      <a class="scroll-trigger" href="#about">
        <div class="scroll-down">
          <span>
            <i class="fa fa-angle-down fa-4x"></i>
          </span>
        </div>
      </a>
    </div>
  </div>
</header>

1 Ответ

1 голос
/ 21 апреля 2019

Просто удалите медиазапрос из вашего CSS 

@media screen and (min-width: 650px){
    // CODE
}

, если вы напишите это в своем CSS, этот код будет применяться только тогда, когда размер вашего разрешения экрана превышает 650px или min-width: 650px

РЕДАКТИРОВАТЬ

На вашем сайте есть .header.page-header класс, содержащий (min-width: 500px), поэтому удалите его и ваша проблема решена.

замените background-size: 100% на background-size: cover

header.page-header {
  text-align: center;
  color: white;
  background-image: url("https://images.pexels.com/photos/1040499/pexels-photo-1040499.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: 100%;
  background-attachment: scroll;
}

header.page-header .intro {
  padding-top: 100px;
  padding-bottom: 100px;
}

header.page-header .intro p {
  font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 25px;
}

header.page-header .intro h1 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 25px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  header.page-header .intro {
    padding-top: 200px;
    padding-bottom: 200px;
  }
  
  header.page-header .intro p {
    font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 25px;
  }
  
  header.page-header .intro h1 {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 65px;
    font-weight: 700;
    line-height: 75px;
    margin-bottom: 50px;
    text-transform: uppercase;
  }
}
<header class="page-header">
  <div class="container">
    <div class="intro">
      <p>Hello.</p>
      <a class="scroll-trigger" href="#about">
        <div class="scroll-down">
          <span>
            <i class="fa fa-angle-down fa-4x"></i>
          </span>
        </div>
      </a>
    </div>
  </div>
</header>
...