Looking for a solution to make the domain name always visible on small screens? I have an HTML template with basic PHP that displays the domain name prominently for sale but it doesn't fit properly on devices like an iPhone SE. The challenge is to adjust the font size dynamically to ensure the entire domain is visible within the screen width.
The template utilizes HTML, PHP, CSS, JS, and Bootstrap 5. Below is a snippet of the index code where the issue arises:
<div class="container py-5 px-4 px-lg-5 my-auto">
<div class="row">
<div class="col-12 text-center mx-auto">
<h1 class="text-7 text-white bg-danger d-inline-block fw-700 rounded px-4 mb-4">This is the domain:</h1>
<h2 class="text-18 fw-700 text-white mb-4"><?php echo $_SERVER['HTTP_HOST']; ?></h2>
<h3 class="text-white fw-400 mb-4"></span></h3>
The CSS class "text-18" controls the font size for smaller screens. Here's a part of the CSS related to it:
.text-18 {
font-size: calc(1.625rem + 4.5vw) !important;
}
@media (min-width: 1200px) {
.text-18 {
font-size: 5rem !important;
}
}
.fw-700 {
font-weight: 700 !important;
}
.text-primary, .btn-link:not(.text-white):not(.text-light):not(.text-dark):not(.text-body) {
color: #0d6efd !important;
}If you're struggling to make the full domain name visible on small screens, check out this example with a domain of 19 characters.