I am trying see if this is even possible. If there is a solution that is cross browser compatible I would be interested. I have a simple Pull Quote which I want to put text into the middle of it. Of course I want to keep the same margins around the text block but it should reuse for other screen sizes proportionally. I have been trying different methods I can think of but I cannot get it. Any help would be appreciated. Thanks.
Thanks. This is a good start. Now I have to figure out how to wrap the text in the quote so any amount of text can fit in it. I really appreciate your time and help.
I would have just made the pull quote in svg and the gold borders could simply be css borders on a div. In that way the div will adapt to the content automatically.
Just absolutely place the pull quote in the middle of the left edge and rub out the borders with a white background.
Something like this but of course substitute the quote marks for your svg.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.box {
position:relative;
border: 13px solid #c69214;
max-width:960px;
min-width:300px;
padding:25px 50px;
font-style:normal;
margin:25px auto;
color: #0d277e;
box-sizing:border-box;
}
.box:after {
content:"\201C";
color:#c69214;
font-size:200px;
position:absolute;
top:0;
bottom:0;
left:-50px;
bottom:0;
line-height:1;
background:#fff;
height:100px;
width:100px;
margin:auto;
}
.box cite{font-size:1rem;font-style:normal;}
.box p{
margin:0 0 25px;
font-size: 2rem;
font-style: oblique;
}
@media screen and (max-width:1060px){
.box{margin:0 50px}
}
</style>
</head>
<body>
<blockquote class="box">
<p>Typically, 96 percent of fourth- and eight-gradesudents and 85 percent of twelfth-grade studentsselected agree to participate.</p>
<footer><cite>Source: U.S. Department of Education, Institute of Education Science, National Center forEducation Statistics, National Assessment of Educational Progress [NAEP] 2015 Mathmaticsand Reading Assessments</cite> </footer>
</blockquote>
</body>
</html>
I cannot figure it out. I am new working working with SVG code. I cannot get the SVG to move. I have it within the quote box only. Here is the code just for the quotes: