При уменьшении размера окна мне нужно использовать медиа-запрос, чтобы текст заполнял страницу, чтобы быть более читаемым, если это возможно

#html #css #media-queries #width

#HTML #css #медиа-запросы #ширина

Вопрос:

Как показано стрелками, текст и изображение должны расширяться по мере сокращения для лучшей читаемости.

Как показано стрелками, текст и изображение должны расширяться по мере сокращения для лучшей читаемости.

Я попытался использовать

 @media only screen and (max-width: 1400px) {
    #container {
    width: 100%;
}
 
 .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.centerpage {
   margin: auto;
   width: 50%;
}

.content {
   color: rgb(222, 222, 222);
   width: 100%;
}

.img {
   height: auto;
   width: 100%;
   border: 5px solid white;
   margin-left: 20px;
} 
 <section id="container" class="centerpage">
    <div class="content">
        <!-- content -->
    </div>
</section> 

Могу ли я что-нибудь добавить, что могло бы помочь? Я попытался опубликовать, не включая много контента, чтобы упростить его.

Комментарии:

1. Может быть .. если вы поделитесь своим кодом .. или, что еще лучше, воспроизведите проблему на живом примере, мы сможем вам помочь. Но мы не волшебники.

2. Извините, я очень новичок в этом, я обновил его, спасибо за вашу помощь.

3. Добро пожаловать в Stack Overflow. Попробуйте .centerpage { margin: auto; width: 100%; } , чтобы ширина составляла 100% вместо 50%.