Изображение не становится мобильным отзывчивым - PullRequest
Новая
       4

Изображение не становится мобильным отзывчивым

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

Я пытаюсь сделать изображение и текст мобильными, но не могу. Что-то не так с CSS? Я использую Bootstrap 4.
Вот код:

HTML файл 

<header class="masthead d-flex">
<div class="container text-center my-auto">
  <div class="row">
    <div class="col-lg-10 mx-auto">

  <img src=" " alt="" class="rounded-circle" width="600" height="400">

  <h3 class="mb-5">
    <h3 style="font-family:courier;">ABC</h3>

  </h3>  
</div></div></div>
<div class="overlay"></div>

CSS

 .masthead {
 min-height: 30rem;
 position: relative;
 display: table;
 width: 100%;
 height: auto;
 padding-top: 8rem;
 padding-bottom: 8rem;
 background: linear-gradient(90deg, fade-out($white, 0.9) 0%, fade-out($white, 0.9) 100%);
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
 h1 {
 font-size: 4rem;
 margin: 0;
 padding: 0;
     }
 @media (min-width: 992px) {
 height: 100vh;
  h1 {
  font-size: 5.5rem;
   }
 }
  }

Любая помощь будет по достоинству оценена!

1 Ответ

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

Это должно сработать. У вас есть пара проблем с вашим кодом.

1) Ваш медиа-запрос неверен 2) необходимо изменить h1 на h3 3) rem - фиксированный размер шрифта относительно стандартного значения, обычно 16px. Используйте% или VW / VH 

.masthead {
 min-height: 30vw;
 position: relative;
 display: table;
 width: 100%;
 height: auto;
 padding-top: 8vw;
 padding-bottom: 8vw;
 background: linear-gradient(90deg, fade-out($white, 0.9) 0%, fade-out($white, 0.9) 100%);
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
 }
 
 img{
 width:60vw;
 height:40vw;}
 
 h3 {
 font-size: 4vw;
 margin: 0;
 padding: 0;
     }
 @media (min-width: 992px) {
 
  h3 {
  font-size: 5.5vw;
  color:green;
   }
 }
<header class="masthead d-flex">
<div class="container text-center my-auto">
  <div class="row">
    <div class="col-lg-10 mx-auto">

  <img src=" " alt="" class="rounded-circle" >

  <h3 class="mb-5">
    <h3 style="font-family:courier;">ABC</h3>

  </h3>  
</div></div></div>
<div class="overlay"></div>
...