How to create a responsive Div with text using VW units?

At the moment, I am utilizing "vw" units to ensure my text box is responsive.

Initial example (Not 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 example (Trying 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>

These are some issues that need fixing, but I'm unsure how to address them:
1.) Am I implementing VW correctly in this situation? Is there a more effective solution?
2.) I want the sections' height to adjust based on their content while maintaining a minimum height (635px for the first and 488 for the second) because currently, when resizing the browser smaller, the content overlaps anything below it.

Is there any flaw with this approach? Are there better alternatives?

htmlcss

Answer №1

Is this the correct solution? If not, please inform me.

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 that I have made some modifications to the HTML markup. Thank you!

jsFiddle

Answer №2

Query 1

Utilizing vw in this manner is completely acceptable. While percentage widths can achieve similar results as vw, nesting may require adjusting the parent's widths to make percentages function properly (as highlighted by Chris Coyier here).

The nested elements, specifically the <div class="section">s, appear narrower than the viewport due to unreset margins on the <body> element. To utilize percentages correctly, an initial margin reset and adjustments are necessary, like so:

/* Resetting margins */
body, html {
    margin: 0;
    padding: 0;
}

/* Applying percentages */
.about-us-info {
    width: 46.9%;
}

span.span-header {
    width: 47.4%;
}

It is important to note that vw faces challenges with browser support (refer to the known issues tab).

Query 2

In the provided code snippet, the text boxes adopt position: absolute for centering, causing them to be removed from the document flow and not expanding to accommodate content. To enable proper expansion, consider utilizing an alternative centering technique such as CSS table centering mentioned here.

Implement CSS table centering with the following steps:

<!-- Surround text boxes with containers... -->

<div class="section" id="second">
    <div class="container">
        <div class="about-us-info">
            <!-- ... -->
        </div>
    </div>
</div>

Subsequently, remove the current absolute-based centering on the text boxes and integrate the following:

/* Transform the parent into a table: */
.section {
    display: table;
    width: 100%;
}

/* Style the container as a table cell and centralize it: */
.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for creating an if statement for product activation?

<form method="get" formenctype="text/plain" action="https://app.cryptolens.io/api/key/Activate" > <input type="text" maxlength="23" size="80" name="Key" placeholder="XXXXX-XXXXX-XXXXX-XXXXX" /> <input type="hidden" name="toke ...

javascripthtml

Hide the navigation bar when the page first loads

Upon loading my page, the navbar button at the top is automatically expanded. Here is the code snippet: <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main" ...

javascripthtmlcssbootstrap-4

What is the best way to deactivate unclicked href links within a loop?

https://i.sstatic.net/sUufY.png Looking at the template image, my goal is to disable all links that were not clicked when one of the links from 'number1' to 'number3' is clicked. For example, if 'number2' is clicked, then &ap ...

javascripthtml

Aligning elements in the middle of a div, from side to side

If you imagine a container div that is 100px wide, and inside it there are 3 smaller divs each 20px wide. I am wondering how to align these smaller divs so that they are centered within the container div, with a 20px gap on each side? ...

htmlcssalignment

Modifying Table Cell Background Color in ReactJS: A Guide to Conditionally Updating Cell Color Without Affecting the Entire Row

I am working on changing the background color of a cell based on its value. Currently, I am utilizing the following library: react-data-table-component Procedure: If the value is above 0, then the cell's background color will be red. Otherwise, th ...

cssreactjsdatatablefrontend

Selecting dropdown list values with Selenium in C#

I'm encountering an issue while trying to populate a dropdown list using Selenium WebDriver in C#. Below is the snippet of HTML code: <div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 278px;" tit ...

c#htmlseleniumxpathdrop-down-menu

What could have caused the issues with my validation in cakephp3.4.13?

Every time I try to enter a value, it keeps saying 'This value is already in use' even though it's not yet in the database. Occasionally, it displays a message saying "This field cannot be left empty." public function validationDefault(Val ...

phpcsscakephpcakephp-3.0

Tips for alternating the color of <li> or <tr> elements consecutively

Looking to alternate the background color of li or tr elements consecutively. Please note: A static class will not work as I need to call this in a while loop. The desired output should look like: <li>line1</li> //white background <li> ...

javascriptphpjqueryhtmlcss

I can't seem to get my JavaScript to connect to my HTML file. What should I do next?

I'm facing a major issue at the moment. My HTML file doesn't seem to be linking properly with my JavaScript file, even though they are located in the same folder. The script link is correctly placed in the HTML file, but for some reason, it just ...

javascripthtml

React-select: issue with maintaining selected option on input

Hello everyone, I am new to React and seeking some assistance in reviewing my code. I have a component called Bucket that contains multiple challenges as separate components. Here is a simplified version of the code: class CLL_Bucket extends Component { ...

javascripthtmlreactjsreact-select

Tips for beginners on determining the best placement for CSS properties on a webpage

As a newcomer to CSS, I have encountered some issues when working with properties in different sections of code. For example: P1: Please review the implementation of #menu and #menu a. The code can be found here. P2: Also, take a look at #menu a specific ...

htmlcsswebtypesetting

The battle between percentages and pixels in fluid design

I am looking to create a flexible layout and would like to achieve the following: width:100%-200px; This means having a div that contains content, referred to as div id="content", with a fixed margin on each side. I have attempted to place the div id="co ...

htmlcssfluid-layout

There are various IDs in the output and I only require one specific ID

I have a JSON fetcher that is functioning properly. However, whenever I request an ID, it returns all the IDs present in the JSON data. Is there a way to retrieve only the latest ID? This is my first time working with JSON so I am still learning. $(docu ...

javascripthtmljsonfetch

What is the best way to add a div to the bottom of a grid layout?

Here is the code I am working with: .my-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 20px; } .item { background-color: #ddd; height: 300px; } <div class="my-grid"> <div class="ite ...

htmlcsscss-grid

Showing a 2D array in HTML using ngFor loop

I need to display a list of arrays in an HTML p-table. Here is the array list: [Array(2), Array(2), Array(2), Array(2), Array(1)] 0: (2) ["abc", "def"] 1: (2) ["ghi", "jkl"] 2: (2) ["mno", "pqr"] ...

javascripthtmlarraysangular

What is the reason behind the gray background color showing up exclusively in Google Chrome?

When using other browsers, there are no issues. However, in Chrome, a gray background color appears when hovering over the menu, and partially or completely disappears when moving the mouse away from the menu. Interestingly, it also vanishes completely whe ...

cssgoogle-chromehtml

Nothing is being returned when using JQuery AJAX POST

Having trouble identifying the issue, as all that seems to happen is the URL changes to "http://localhost/?search=test" when entering "test", for example. index.php <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

phpjqueryhtmlajax

Arrange the table by column following a service request

Is there a method to organize the table below once it has been loaded? I am utilizing Google API to retrieve distance matrix data, but I want the table to be sorted by distance. However, this sorting should take place after the Google service call is comp ...

javascriptjqueryhtmlajaxmodel-view-controller

Failure to connect HTML and CSS files

My HTML and CSS files are not linking even though they are in the same folder. Here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl ...

htmlcss

Starting the animation only when the slide is visible

Struggling to add animations dynamically as a HTML/CSS developer who avoids JS but uses jQuery occasionally? Sound familiar? Well, I have. Recently, I managed to create a CSS-3 animation for the images in a Bootstrap carousel. Check out the code below: ...

htmlcsstwitter-bootstrap