CODEWITHSUNDEEP
htmlcssviewportfont-size
Michael A
Michael A

Reputation: 4625

How do I use CSS to scale the font to the viewport while maintaining a two-column layout?

I have HTML and CSS code like this:

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="example.css"/>
</head>

<body>
    <div id="main">
        <span class="alignleft">First event, including a few words of description</span>
        <span class="alignright">Date of first event</span>
    </div>
</body>
</html>

CSS:

html {
    overflow-y: scroll;
    max-width: 800px;
    margin: auto;
}

body {
    background-color: #fff;
    color: #000;
    font-family: sans-serif;
    padding: 0;
    margin: 0;
}

#main {
    margin: 0;
    max-width: 50em;
    padding: 1.5em;
}

span.alignleft {
    float: left;
    width:80%;
    text-align:left;
}

span.alignright {
    float: left;
    width:20%;
    text-align:right;
}

On a large window/viewport, this produces text in a two-column layout like this (which is what I want):

Text that isn't wrapped

On a smaller window/viewport, e.g. a mobile browser, this produces text like this:

Wrapped text

There isn't a lot of text here, so I'd like the font to scale according to the viewport instead of wrapping, as much as possible (and this should be possible on most viewports because, again, there isn't a lot of text here).

However, if I add font-size:2vw elements to the CSS, e.g.

html {
  overflow-y: scroll;
  max-width: 800px;
  margin: auto;
}

body {
  background-color: #fff;
  color: #000;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

#main {
  margin: 0;
  max-width: 50em;
  padding: 1.5em;
}

span.alignleft {
  float: left;
  width: 80%;
  text-align: left;
  font-size: 8vw;
}

span.alignright {
  float: left;
  width: 20%;
  text-align: right;
  font-size: 2vw;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
  <link rel="stylesheet" type="text/css" href="example.css" />
</head>

<body>
  <div id="main">
    <span class="alignleft">First event, including a few words of description</span>
    <span class="alignright">Date of first event</span>
  </div>
</body>

</html>

This kills the two-column layout and the rest of the formatting. How do I fix this?

Upvotes: 1

Views: 165

Answers (2)

You Old Fool
You Old Fool

Reputation: 22966

You can add your desired font-size:2vw to scale with viewport along with a couple of other rules:

  • Setting the wrapper and spans to render as table and cells
  • Setting white-space on the spans to nowrap

This seems to do what you want but renders a bit odd on a large viewport. An improved approach would probably be to use at least one media query and to set the dynamic font size only on smaller screens.

html {
  overflow-y: scroll;
  max-width: 800px;
  margin: auto;
}

body {
  background-color: #fff;
  color: #000;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

#main {
  margin: 0;
  max-width: 50em;
  padding: 1.5em;
  display: table;
  width: 100%;
  box-sizing: border-box;
}

#main>div.row {
  display: table-row;
}

span.alignleft {
  text-align: left;
}

span.alignright {
  text-align: right;
}

span.alignleft,
span.alignright {
  white-space: nowrap;
  display: table-cell;
  padding: 0 5px;
}

@media only screen and (max-width: 768px) {
  #main {
    padding: .5em;
  }
  span.alignleft,
  span.alignright {
    white-space: nowrap;
    display: table-cell;
    font-size: calc(6px + 1.5vw);
  }
}
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
  <link rel="stylesheet" type="text/css" href="example.css" />
</head>

<body>
  <div id="main">
    <div class="row">
      <span class="alignleft">First event, including a few words of description</span>
      <span class="alignright">Date of first event</span>
    </div>
    <div class="row">
      <span class="alignleft">First event, including a few words of description</span>
      <span class="alignright">Date of first event</span>
    </div>
  </div>
</body>

</html>

Upvotes: 2

Johannes
Johannes

Reputation: 67814

You can use the fw unit for font-size as you did, but you simply have to use smaller values. Start with font-size: 0.5vw and change the value slowly trying different values to get the desired result.

Keep in mind: One vw is one percent of the screen width, so for a 1000px wide screen, 8vw means 80px fontsize!

Upvotes: 3

Related Questions