Recently, I made the switch from Bootstrap 3 to Bootstrap 4 and have been struggling with adjusting the font size for elements such as h1, p, and span.
UPDATE: I am looking to change the font size based on screen size using Media Queries.
I appreciate @ZimSystem for providing insight on how to adjust the font size. However, I am curious about changing it dynamically according to different screen resolutions through media queries.
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
h1 {
font-size: 30px;
}
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
h1 {
font-size: 100px;
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
h1 {
font-size: 150px;
}
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
h1 {
font-size: 200px;
}
}
Here's a snippet of my HTML code:
<img class="img-responsive mx-auto d-block" src="./assets/brand/cmm.png" />
<div class="row">
<div class="col-md-12 text-center">
<h1><strong>This is a sample title</strong></h1>
<h2 class="text-white">South Florida's Community of Creatives Come together</h2>
</div>
</div>
Unfortunately, even this approach isn't yielding the desired results.
Am I overlooking something here? Or does Bootstrap 4 not allow for responsive font-size changes purely through CSS?