Html Question posted in
Some basic documentation can be found here.

Html – Long text on small screens not visible. It's cut off

I have an HTML template with basic PHP designed to display the domain name (where this template is hosted) prominently for sale. What it does is take the domain name and display it in large text at the center of the screen.

The problem is that on small screens, such as an iPhone SE (375×667), the domain if is large doesn’t fit within the screen width, and several letters fall outside, making them invisible.

What I want is for the full domain name to always fit within the screen width, using the maximum possible font size while ensuring the entire name is visible.

The template uses HTML, PHP, CSS, JS, and Bootstrap 5.

Here’s the index code where I’m facing the issue in H2 title line:

<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>

In CSS the class "Text-18 corresponds to the following:

.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;
}

I’ve tried several things but haven’t been able to achieve it.

Here’s an example of what happens on small screens with a domain consisting of 19 characters, including the extension: "supermegadomain.com".

Tags:

2

Answers


  1. 0

    As for the code you have provided above:
    May I know the exact host you are targeting in terms of character length.
    I have tested your code with the style you have provided and its working well on all the screen emulations I have tested, from very small phone to 4k display.

    Fix 1.
    Try check if the other classes you are adding together with text 18 have an issue because you have not provided that and I cant guess.

    Fix 2.
    Check if any of these classes ‘fw-700 text-white mb-4’ has an ‘!important’ size declared because if they do, they override the important in text 18 class. If present, make text 18 last declared.

    <h2 class=" fw-700 text-white mb-4 text-18"><?php echo $_SERVER['HTTP_HOST']; ?></h2>
    Login or Signup to reply.
  2. 0

    try this.. Its working fine for me

    <style>
.text-18 {
  font-size: calc(1.625rem + 2.5vw);
}
.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;
}
</style>
    <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">somelongtextdomainname.com</h2>
      <h3 class="text-white fw-400 mb-4"></span></h3>
    </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search