Font size with percentage value (%) not scaling with screen size

by

I think what you’re looking for are viewport percentage units.

Try this:

.about-content-title h1 { font-size: 5vw; }

With this adjustment, when you re-size the browser window the font will scale in size.

From the spec:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly.

  • vw unit – Equal to 1% of the width of the initial containing block.
  • vh unit – Equal to 1% of the height of the initial containing
    block.
  • vmin unit – Equal to the smaller of vw or vh.
  • vmax unit – Equal to the larger of vw or vh.

Using percentage values (%) doesn’t scale your fonts relative to the viewport because these values are relative to a parent or ancestor. See the spec: 4.3. Percentages: the <percentage> type

More Related Contents:

  1. How to Create Border In Css Iike
  2. CSS margin terror; Margin adds space outside parent element [duplicate]
  3. Table fixed header and scrollable body
  4. How to vertically align text inside a flexbox?
  5. display: inline-block extra margin [duplicate]
  6. CSS grid square layout [duplicate]
  7. Masonry-style Layout ONLY with CSS
  8. CSS Single-column layout centered fixed-width 100% height w header and footer
  9. Position icons into circle
  10. How can I have two fixed width columns with one flexible column in the center?
  11. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  12. How to style dt and dd so they are on the same line?
  13. How to display vertical text in table headers with auto height / without text overflow?
  14. Add target=”_blank” in CSS
  15. Center image element in parent div
  16. Why is the span’s line-height useless?
  17. CSS – How to have children in different parents the same height?
  18. HTML ordered list 1.1, 1.2 (Nested counters and scope) not working
  19. Can you use CSS to mirror/flip text?
  20. Fallback background-image if default doesn’t exist
  21. CSS list-style-image size
  22. Make a parent div webkit-filter not affect children
  23. Square DIV where height is equal to viewport
  24. Pin a flex item to the bottom of the container
  25. How to curve the div from bottom with image background
  26. wrap anchor tag around li element
  27. align images side by side in html
  28. Removing the Bevel Effect on the Corner of Borders
  29. CSS class starting with number is not getting applied
  30. How to set a percentage height value in HTML/CSS

Leave a Comment