Как мне сделать так, чтобы моя цитата реагировала на разные размеры экрана?

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

Я попытался изменить размер шрифта на единицу vw.

.container {
  width: 590px;
  margin: 140px auto;
  position: relative;
}

blockquote {
  width: 565px;
  font: 2.65em CallunaRegular;
  letter-spacing: .075em;
  float: left;
  padding: 45px 0 30px 25px;
  margin: 0;
  border-top: 2px dotted #858585;
  border-bottom: 2px dotted #858585;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
}

.container:before {
  content: "“";
  font-size: 13vw;
  position: absolute;
  left: -100px;
  color: #666;
}

.container:after {
  content: "”";
  font-size: 13vw;
  position: absolute;
  right: -100px;
  top: 150px;
  color: #666;
}

blockquote:first-line {
  font: 1.85em "Sketch Block";
  color: #fff79e;
}

blockquote:first-letter {
  font-size: 2.9em;
  text-transform: uppercase;
  float: left;
  line-height: .52em;
  margin-right: -18px;
  position: relative;
  z-index: 1;
}

blockquote strong:first-child {
  margin-left: 8px;
  letter-spacing: 0;
}

blockquote strong:last-child {
  font: 2em "Museo 700";
  text-transform: uppercase;
  letter-spacing: 0;
}

blockquote em {
  border-bottom: 2px dotted #858585;
}

blockquote+b {
  float: right;
  margin-top: 10px;
  font: 1.6em CallunaRegular;
  letter-spacing: .15em;
}

blockquote+b:first-letter {
  color: #fff79e;
  font-size: 1.3em;
  font-style: italic;
  letter-spacing: .25em;
}

@-moz-document url-prefix() {
  blockquote:first-letter {
    margin-top: -29px;
  }
}
<div>
  <header>
    <article class = "container">

      <blockquote>
        <strong>This</strong> Is<em>Just</em> An
        <strong>Example</strong>
      </blockquote>
      <b>Example.</b>
      <a href = "#About" class = "down-btn">&#8595;</a>
    </article>
  </header>
</div>

Я ожидаю, что размер цитаты изменится при изменении размера браузера.

Он не может быть отзывчивым с фиксированной шириной.

Paulie_D 13.07.2019 20:21

Просто измените ширина: 565 пикселей на 100% и добавьте максимальная ширина: 565px. То же самое касается класса контейнера. ширина: 100% и максимальная ширина: 590px.

Galanthus 13.07.2019 20:26

Спасибо @Galanthus, это сработало.

RianneJ 13.07.2019 20:49

Добро пожаловать .. Можете ли вы проголосовать / принять ответ? Спасибо.

Galanthus 13.07.2019 20:51

@Galanthus Я не могу, поскольку вы написали ответ в качестве комментария, если вы можете изменить его на ответ, я с радостью это сделаю. :)

RianneJ 13.07.2019 20:55

Спасибо, Рианна добавила ответ.

Galanthus 13.07.2019 20:58
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
6
495
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто измените

с ширина: 565 пикселей по 100% и добавьте максимальная ширина: 565px.

То же самое касается класса контейнера. ширина: 100% и максимальная ширина: 590 пикселей.

Другие вопросы по теме