Я добавил цитату в заголовок своей страницы и пытаюсь сделать ее отзывчивой, чтобы текст подстраивался под размер экрана. Я хотел бы, чтобы текст оставался по центру и менял размер в зависимости от браузера.
Я попытался изменить размер шрифта на единицу 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">↓</a>
</article>
</header>
</div>
Я ожидаю, что размер цитаты изменится при изменении размера браузера.
Просто измените ширина: 565 пикселей на 100% и добавьте максимальная ширина: 565px. То же самое касается класса контейнера. ширина: 100% и максимальная ширина: 590px.
Спасибо @Galanthus, это сработало.
Добро пожаловать .. Можете ли вы проголосовать / принять ответ? Спасибо.
@Galanthus Я не могу, поскольку вы написали ответ в качестве комментария, если вы можете изменить его на ответ, я с радостью это сделаю. :)
Спасибо, Рианна добавила ответ.
Просто измените
с ширина: 565 пикселей по 100% и добавьте максимальная ширина: 565px.
То же самое касается класса контейнера. ширина: 100% и максимальная ширина: 590 пикселей.
Он не может быть отзывчивым с фиксированной шириной.