mina cosentino mina cosentino - 1 month ago 8
CSS Question

How do I position the "subhead" and "description" text within the brackets?

CODEPEN

I'm assuming that it has to do with my positioning (I'm still struggling a bit to understand which is best for specific elements). I also would like the brackets to stay positioned within the column confines in case a user has a narrower window opened.

HTML

<div class="col-md-4 col-md-offset-4">
<div class="space margin-10">
<div class="brackets">
<h1 class="bracket-l">{</h1>
<h1 class="bracket-r">}</h1>
<h2 class="subhead align-center text-up size-1" id="title">HCM</h2>
<p class="description align-center size-1">Uniting Organizations with HR Solutions that Help Drive Revenue | ADP.com</p>
</div>
</div>
</div>


CSS

.space {
text-align: center;
position: relative;
}

.bracket-l {
font-family: 'proxima-nova', sans-serif;
font-size: 15rem;
font-weight: 300;
text-align: left;
position: absolute;
}

.bracket-r {
font-family: 'proxima-nova', sans-serif;
font-size: 15rem;
font-weight: 300;
text-align: right;
}

Answer Source

you may try this code, using before/after element:

.content {
margin:0 auto;
padding:50px;
text-align:center;
position:relative;
}

.content:before {
position:absolute;
left:0;
top:0;
content:"{";
font-family: 'proxima-nova', sans-serif;
  font-size: 15rem;
  font-weight: 300;

}
.content:after {
position:absolute;
right:0;
top:0;
content:"}";
font-family: 'proxima-nova', sans-serif;
  font-size: 15rem;
  font-weight: 300;

}
<div class="content">
<h1>Some text</h1>
<h3>More text More text More text More text</h3>
</div>