Centered Text Group


(Jonathan Langberg) #1

I created a text box that expands and shrinks based on the browser width so I could have a responsive feel to the page. The problem is, when the text box shrinks or expands to a different width than the one created in the editor view, it becomes off-centered. I don’t want to check off the “100% height” option, as I would like to have more sections below it. Is there any hack to make the text box always be centered within a div/group? See file below:

Centered Text.hype.zip (40.9 KB)


#2

It is definitely horizontally centered, but I’m not sure if you’re talking about also getting the div vertically centered. Can you send a screenshot of what you’re seeing and explain what you’d like to see?


(Jonathan Langberg) #3

Here’s a video demonstration:

Centered Text Video .mov (2.9 MB)


(Hans-Gerd Claßen) #4
<style>
h2{
color: #000;
padding: 8px;
font-family: Montserrat;
font-size: 24px;
line-height: 51px;
font-weight: normal;
text-align: center;
margin: 0
    }
h3{
color: #747474;
padding: 8px;
font-family: Poppins;
font-size: 16px;
line-height: 24px;
font-style: normal;
font-weight: 300;
text-align: center;
margin: 0;
border-style: solid;
border-width: 0;
border-bottom-width: 2px
}    
p{
color: #000;
padding: 8px;
font-family: Poppins;
font-size: 16px;
word-wrap: break-word;
font-weight: 300;
text-align: center
}
div .flexWrapper{
height: 100%;
display: flex;
align-items: center
}
div .contentWrapper{
margin:0;
padding: 0 5% 0 5%;
width:100%;
}
</style>

<div class="flexWrapper">
<div class="contentWrapper">
<h2>HEADING</h2>
<h3>This is a Subheading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

link (there are always other, better, optimized solutions …)


(Jonathan Langberg) #5

Thanks Hans! You the man!