How to make text fill div without overflowing? - html

Question

I am trying to fill the text in the grids such that it is readable on all kinds of devices. I also want the text to be center aligned (vertically and horizontally).
HTML:
<div class="d-none d-lg-block">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<h1 class="display-6">Solar Tracker</h1>
<div class="v-align">
<p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
<button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Plant Grower</h1>
<div class="v-align">
<p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
<button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Home Automation</h1>
<div class="v-align">
<p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
<button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">PCB Design</h1>
<div class="v-align">
<p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
<button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Studio Griot</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Web Development</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Data Visualisation</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Stem CS Labs</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
</div>
CSS:
#media(min-width:1100px){
.row{
height: 50vh;
}
.col-lg-3{
text-align: center;
position: relative;
}
.v-align{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
}
#media(min-width:750px){
.row{
height: 50vh;
}
}
.alternate_2{
background-color: rgb(250,244,246);
}
.display-6{
padding-top: 20px;
}
.text{
text-align: center;
}
Desktop Output:
Laptop Output:
iPad Output:
As you can see in all the outputs, the text within the grid is either too small to read (desktop), overflowing from the grid (laptop), or changes the grid size (iPad). What I am trying to do it to keep make the text readable and centered, along with retaining the grid shape of the page, on all devices. How can I do this?
Thank you

Answer 1

Using flexbox and auto margins we can align vertically and horizontally.
Demo
[flex]{
width:400;
height:200px;
border:1px solid;
display:flex;
}
[flex]>span{
margin:auto;
}
<p flex><span>Some text</span><p>
auto margins will consume white space evenly on all sides, We can do the same using alignment Properties However since flexbox does true centering it that would case the same issue as the one you're facing related
.row {
height: 50vh;
}
.col-lg-3 {
text-align: center;
}
.alternate_2 {
background-color: rgb(250,244,246);
}
.display-6 {
padding-top: 20px;
}
.text {
text-align: center;
}
/* New */
.col-lg-3 {
text-align: center;
overflow:auto;
height:100%;
display: flex;
flex-direction: column;
}
/* Former .v-align class, Now manages centering on both axis*/
.centerVH{
margin:auto;
/* Since the text fills all the width, We Must reduce it's width */
max-width:75%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-none d-lg-block">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<h1 class="display-6">Solar Tracker</h1>
<div class="centerVH"><p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
<button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Plant Grower</h1>
<div class="centerVH"><p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
<button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Home Automation</h1>
<div class="centerVH"><p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
<button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">PCB Design</h1>
<div class="centerVH"><p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
<button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Studio Griot</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Web Development</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Data Visualisation</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Stem CS Labs</h1>
<div class="centerVH"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary">Learn More</button>
</div>
</div>
</div>
</div>
An issue will arise when 50vh on .row would be shorter than the text, I made .col-lg-3 scrollable when that happens, However it's up to you how you want to deal with it.

Answer 2

I suggest not to over complicate things in CSS, there are better ways, and more reliable, to do this. Use CSS Flex for example.
.alternate_2 {
background-color: rgb(250,244,246);
}
.row {
display: flex;
flex-wrap: wrap;
text-align: center;
}
.col-lg-3 {
width: 100%;
padding: 2vw;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.v-align, .text {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.text {
justify-content: center;
}
#media(min-width: 500px) {
.col-lg-3 {
width: 50%;
}
}
#media(min-width: 1200px) {
.col-lg-3 {
width: 25%;
}
}
<div class="d-none d-lg-block">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<h1 class="display-6">Solar Tracker</h1>
<div class="v-align">
<p class="text">The Solar Tracker is a device that that controls the positioning of a Solar Panel as to utilize the maximum amount of sunlight available. </p>
<button onclick="window.location.href='projects/solar_tracker.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Plant Grower</h1>
<div class="v-align">
<p class="text">A controlled environment to grow plants indoors, using an Arduino, a grow light, and various sensors.</p>
<button onclick="window.location.href='projects/plant.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Home Automation</h1>
<div class="v-align">
<p class="text">Home Automation is building systems which allow us to digitally control the appliances in our homes.</p>
<button onclick="window.location.href='projects/home_automation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">PCB Design</h1>
<div class="v-align">
<p class="text">PCB stands for Printed Circuit Board. A printed circuit board mechanically supports and electrically connects electrical or electronic components using conductive tracks, pads and other features etched from one or more sheet layers of copper laminated onto and/or between sheet layers of a non-conductive substrate.</p>
<button onclick="window.location.href='projects/pcb_design.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Studio Griot</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/studio_griot.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Web Development</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/web_development.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3 alternate_2">
<h1 class="display-6">Data Visualisation</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='projects/data_visualisation.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
<div class="col-lg-3">
<h1 class="display-6">Stem CS Labs</h1>
<div class="v-align">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
<button onclick="window.location.href='internships/stem_cs.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
</div>
</div>
</div>
</div>
</div>