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
