Как сделать текстовый блок на изображении отзывчивым? - PullRequest
Новая
       23

Как сделать текстовый блок на изображении отзывчивым?

0 голосов
/ 23 января 2019

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

Ссылка: http://test.preci -dental.be / home /

Это код, который я использовал: 

    <style>
.container {
  position: relative;
  font-family: Arial;

}

.text-block {
  position: absolute;
  bottom: 20px;
  left: 95px;
  right: 740px;
  background-color: white;
  opacity: 0.75;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

</style>
</head>
<body>
<div class="container">
  <center><img src="http://test.preci-dental.be/wp-content/uploads/2019/01/helping-your-child-trust-the-dentist-1110x450-1024x415.jpg" alt="Nature" style="width:90%;"></center>
  <div class="text-block">
<h1 style="color:#749C91;">Preci-Dental</h1>
    <br><p style="color:black;">Welkom bij tandartspraktijk Preci-Dental. De groepspraktijk werd door Liesbeth en Karel opgericht in 2019 en is gevestigd in Bertem, gelegen tussen Leuven en Brussel. Bij Preci-Dental streven we naar moderne mondzorg op maat voor iedereen: precieze en persoonlijke service, gebaseerd op bewezen efficiënte en moderne technieken.</strong></p>
  </div>
</div>

Заранее спасибо!

1 Ответ

0 голосов
/ 23 января 2019

Если вы не возражаете против использования медиа-запросов, я думаю, это должно решить вашу проблему:

PS: я использовал "! Важное", потому что я ввел код через плагин.Возможно, в вашем случае это не нужно.

Я также предполагаю, что вы хотите, чтобы текстовая область составляла 70% ширины вашего окна просмотра и 600 пикселей в качестве максимальной ширины в вашем медиазапросе.Поэтому, когда ширина вашего окна просмотра меньше 600 пикселей, код переопределит ваш CSS для этого селектора.

О медиазапросах: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media only screen and (max-width: 600px) {
  .text-block {
    left: auto !important;
    right:auto !important;
    min-width:70vw;
  }
}
...