How do I keep the font-size relative to the container width after resizing (CSS)?

Question

I am using the "vw" unit to define a font-size that is related to it's container width. This works rather ok, but I'm not entirely satisfied with the result. Let me explain...

The code below will generate a box around the container. Within the box I have a text with grey background.

When I show this in a fullscreen browser on my computer the text fills the width of the container. It looks like this:

However... When I resize the browser to approximately half the width of the screen it looks lik this:

The text size is reduced more than the container and the grey relative-text container. I may have misunderstood how the "vw" unit works. Can anyone explain how I should keep the relative font-size in a better way? My goal is that it should look similar in both a desktop and mobile environment.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

     <!-- Custom styles -->
    <style>
        .container {
            border-style: solid;
        }
        .relative-text {
            font-family: helvetica, arial, sans-serif;
            font-size: 2.5vmax;
            background-color: #DDD;
        }
    </style>
</head>

<body>
    <div class="container">
       <div class="relative-text text-center">&lt;== This text is resized when window is resized ==&gt;</div>
    </div>
</body>
</html>

Instead of vmax, you can use vw. Please go through this link for better understanding https://css-tricks.com/viewport-sized-typography/ — Hema Nandagopal, Jul 31 '17 at 11:32
This can be helpful https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — Sanchit Patiyal, Jul 31 '17 at 11:32

score 1 · Answer 1 · answered Jul 31 '17 at 11:37

1

I have changed your code is this what you need

.relative-text {
  font-family: helvetica, arial, sans-serif;
  font-size: 3vw;
  background-color: #DDD;
  border-style: solid;
  text-align:center;
}

<div class="relative-text text-center">&lt;== This text is resized when window is resized ==&gt;</div>

answered Jul 31 '17 at 11:37

Jishnu V S

8,164
7
27
57

Yes it works... Hmm, could it be something in bootstraps "container" class that causes the problem? I see that you left it out... – Gowire Jul 31 '17 at 11:41
in smaller device container width must be 100% – Jishnu V S Jul 31 '17 at 11:43

score 0 · Answer 2 · answered Jul 31 '17 at 12:44

0

Your problem comes from the media querys of the bootstrap container class, removes the div with the container class.

answered Jul 31 '17 at 12:44

Matias Pesoa

1
3

How do I keep the font-size relative to the container width after resizing (CSS)?

2 Answers2