Resize text proportionally to screen size

Question

Here is my code for a small web page:

<!DOCTYPE html>
<html>
    <head>
        <title>Risk Management</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link href="https://riskmp.com/assets/css/home_style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="top"></div>
        <div id="header">
            <img id="logo" src="https://riskmp.com/assets/images/logo_white_text.png" alt="RiskMP Logo"/>
        </div>
        <div id="middle">
            <img id="left-img" src="https://riskmp.com/assets/images/rockclimbing2.jpg" alt="Rock Climbing Photo"/>
            <div id="center">
                <h1 id="center-title">Risk Management for construction: offering a complete set of services and products to minimize product risk and improve project management</h1>
                <ul class="nav">
                    <li class="nav-container">
                        <div class="nav-el nav1">
                            <a>Risk Management Workshops</a>
                        </div>
                        <div class="nav-desc nav-desc1">
                            <a href="#">
                                <div class="desc-link">
                                    RISK MANAGEMENT WORKSHOPS
                                </div>
                            </a>
                            <div class="desc-text">
                                <p>Risk Management workshops to improve project management practices</p>
                            </div>
                        </div>
                    </li>
                    <li class="nav-container">
                        <div class="nav-el nav2">
                            <a>Project Consulting</a>
                        </div>
                        <div class="nav-desc nav-desc2">
                            <a href="#">
                                <div class="desc-link">
                                    PROJECT CONSULTING
                                </div>
                            </a>
                            <div class="desc-text">
                                <p>Project consulting for project planning, scheduling, tracking and Risk management</p>
                            </div>
                        </div>
                    </li>
                    <li class="nav-container">
                        <div class="nav-el nav3">
                            <a>Risk Management Software</a>
                        </div>
                        <div class="nav-desc nav-desc3">
                            <a href="#">
                                <div class="desc-link">
                                    RISK MANAGEMENT SOFTWARE
                                </div>
                            </a>
                            <div class="desc-text">
                                <p>Ground-breaking software that helps you manage risk in your company</p>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
            <img id="right-img" src="https://riskmp.com/assets/images/crane.png" alt="Crane"/>
        </div>
    </body>
</html>

It looks fine on a 1080p display, but when I zoom in (or use a smaller window size), the text in the center of the screen grows as well and extends past the images on either side. What can I do to ensure that the text and links do not extend further down relative to the images?

Thanks,

Paul

What would you expect/want the text do do? – Billy Moat Mar 20 '14 at 15:05 — Billy Moat, Mar 20 '14 at 15:05

score 0 · Answer 1 · edited May 23 '17 at 12:05

you can use mediaqueries to set different font-size in regards of screen width. see here some questions about it https://stackoverflow.com/questions/tagged/media-queries

Risky : you could use vw or vh units to resize font-size, it is not really reliable and chrome for, instance doesn't do any refresh on resize. one link out many : How can I gracefully degrade CSS viewport units?

Last option could be to test screen size by javascript, and adapte font-size. another link Is there any cross-browser javascript for making vh and vw units work

How ever, you need to test your different font-size to make sure, one can still read it :).

here an example that works http://codepen.io/gc-nomade/full/qunsm ... or maybe not . how do i know what media and browser one is using ? — G-Cyrillus, Mar 20 '14 at 15:14

score 0 · Accepted Answer · answered Mar 20 '14 at 16:07

I ended up setting the center div to a fixed width (425px) width a left position of 30%. I removed the image tags and instead made both images a single background for the containing #middle div. While this does not resize the text, it solved my problem with the text overflowing on smaller resolutions.

Resize text proportionally to screen size

2 Answers2