Make Div with text responsive using VW? - html

Question

Currently, I am using units: "vw" to make my textbox responsive.
First fiddle (Non-responsive): https://jsfiddle.net/jzhang172/w7yhd6xx/2/
#second{
height:635px;
background:gray;
}
#second-try{
height:635px;
}
.about-us-info {
margin: 0 auto;
width: 900px;
height: 313px;
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -450px;
top: 50%;
margin-top: -160px;
}
span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Second fiddle (Attempt at responsiveness using "vw"):https://jsfiddle.net/jzhang172/9Lagw1y6/1/
.section{
position:relative;
}
#second{
min-height:635px;
}
.about-us-info {
margin: 0 auto;
width: 46.9vw;
/* height: 16.3vw; */
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -23.4vw;
top: 50%;
margin-top: -160px;
}span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
width: 21.875vw;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
/*----Third section--------*/
#third{
min-height:488px;
background:gray;
}
#services-info{
margin-top:-125px;
border:2px solid white;
border-top:0px;
}
#services-header{
background:transparent;
color:white;
}
#services-paragraph{
color:white;
}
#services-header:before, #services-header:after {
content: "";
position: absolute;
height: 5px;
border-top: 2px solid white;
top: 19px;
width: 11.8vw;
}
#services-header:before {
right: 100%;
margin-right: .85vw;
}
#services-header:after {
left: 100%;
margin-left: .85vw;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<div class="section" id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Here are some errors that I'd like to be corrected but not sure how to:
1.) Is VW being used properly here? Is there a better solution?
2.) I'd like the height of each section to expand based on the content within while maintaining a min-height of each section (635px for the first and 488 for the second) because right now when re-sizing the browser smaller, the content overlaps anything underneath it.
Is there any problem using this solution? Is there a better solution?

Answer 1

Is this it? If not, let me know.
body {margin: 0;}
.sections {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.sections section {
-webkit-box-flex: 1;
-webkit-flex: 1 0 50%;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sections section>div {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
padding: 35px 50px;
border:1px solid #333;
margin: 50px 0;
max-width: 50%;
box-sizing: border-box;
position: relative;
min-width: 50%;
-webkit-transition: min-width .3s ease-out;
transition: min-width .3s ease-out;
}
#second {
background-color: white;
color: #333;
}
#third >div {
border-color: white;
}
#third {
background-color: gray;
color: white;
}
.span-header {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
background-color: white;
padding: 0 1rem;
font-size: 1.8em;
text-transform: uppercase;
text-align: center;
-webkit-transition: font-size .3s ease-out;
transition: font-size .3s ease-out;
white-space: nowrap;
}
#third .span-header {
background-color: gray;
}
#media (max-width: 767px) {
.sections section>div{
min-width: 60%;
}
.sections section>div {
padding: 15px 30px;
}
.span-header {
font-size: 1.25em;
}
}
#media (max-width: 359px) {
.sections section>div{
min-width: calc(100vw - 120px);
}
.span-header {
white-space: initial;
}
}
<div class="sections">
<section id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
<section id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
</div>
Please note I've also made a few adjustments to the html markup. Cheers!
jsFiddle

Answer 2

Question 1
It is perfectly fine to use vw this way. Percentage widths can generally do the same things as vw, but since you have some nesting, you would have to mess with the parent's widths to make percentages work. (This use case was noted by Chris Coyier.)
The nesting I'm talking about is <div class="section">s. Since the margins on the <body element have not been reset, these sections (on some browsers) end up a little narrower than the viewport. To use percentages, you would have to do this:
/* Reset margins */
body, html {
margin: 0;
padding: 0;
}
/* Now use percentages */
.about-us-info {
width: 46.9%;
}
span.span-header {
width: 47.4%;
}
Note vw has more issues with browser support (look at the known issues tab).
Question 2
In the code given, the text boxes are using position: absolute as part of the centering. Absolute positioning takes elements out of the document flow, and that is the reason the sections are not expanding to fit the content. If you want them to expand properly, you will need to use a different centering technique.
CSS table centering (as shown in the link above) would work:
<!-- First wrap your text boxes with containers... -->
<div class="section" id="second">
<div class="container">
<div class="about-us-info">
<!-- ... -->
</div>
</div>
</div>
Then remove the current absolute-based centering on the text boxes and add the following:
/* Make the parent a table: */
.section {
display: table;
width: 100%;
}
/* Make the container a table cell and center it: */
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}