Resize font according to monitor resolution

Question

I am a beginner and am having difficulty adjusting the font size. When the display resolution changes, the text exceeds the div limit. I would like, rather than going beyond the limit of the div, that the text would change the resolution according to the rest of the layout.

Screenshot

HTML:

<div class="sec" id="se">

    <div class="title">
    </div>
    <img class="img" src="img/i.jpg">
    <div class="secleft">
        <div class="txt">
        <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p>
        <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p>
        <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p>
        <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p>
        </div>

    </div>
    <div class="secright">
    </div>
</div>

CSS:

.sec{
    position: absolute;
    height: 50%;
    width: 100%;
    background-color: #009fb2;
    top: 75%;   
}
.title{
    position: absolute;
    height: 15%;
    width: 40%;
    background-color: red;
    top: 5%;
    left: 30%;
}
.img{

    position: relative;
    width: 16%;
    left: 42%;
    top: 28%;   
}

.secleft{
    position: absolute;
    height: 57%;
    width: 30%;
    background-color: #006672;
    top: 28%; 
    left: 7%;
    border-radius: 3px;
}

.txt{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
}

score 0 · Accepted Answer · 2017-02-16T15:23:19.697

0

This is what CSS Media Queries are for.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

You can use @media (max-width: 750px) {css here..}

What this does is it applies different CSS depending on the width of the screen. So you can apply a different font-size inside this block, this will then only be used when the screen is less than 750 pixels wide. Note 750 is just an example and can be set to whatever you like.

Example:

body {
    font-size: 3em;
    }

@media (max-width: 750px) {
    body {
    font-size: 1em;
    }
}

edited Feb 16 '17 at 15:23

answered Feb 16 '17 at 15:06

Don't use pixels for font-sizing. Use em's or rem's instead. – Melvin Koopmans Feb 16 '17 at 15:20
Thanks, completely forgot. Changed it. – Feb 16 '17 at 15:23

score 0 · Answer 2 · answered Feb 16 '17 at 15:18

The unit em is relative to it's parent. Define several breakpoints using media queries and change the font-size of the parent, and it's children will scale down relative to their parent.

For example: https://jsfiddle.net/jpa1fab8/

As you can see the font-size changes relative to their container. Drag the divider in the JSFiddle to make the container smaller

So: define your font-size as em and use @media to change font-size based on certain breakpoints. These are the breakpoints Bootstrap CSS uses: https://v4-alpha.getbootstrap.com/layout/overview/

score -3 · Answer 3 · answered Feb 16 '17 at 14:58

-3

set the font size with following css:

font-size: 1vw;

answered Feb 16 '17 at 14:58

jwetzel

3
1
4

1

You should use em's or rem's for font-sizing instead, and change it's size with media queries – Melvin Koopmans Feb 16 '17 at 15:25

Resize font according to monitor resolution

3 Answers3