CODEWITHSUNDEEP
cssresponsive-design
Pumizo
Pumizo

Reputation: 283

Making a text line responsive

I have the following section on my website. The problem is that the line of text is not being responsive.

How can I turn this into responsive text?

Here is how it shows on a 22" screen:

enter image description here

Here is how it shows on a 13" screen:

enter image description here

Here is how it shows on a 5,2" phone screen:

enter image description here

https://jsfiddle.net/hd99bfyd/

<section id="three" class="wrapper style5">
                <div class="inner">
                <p>Do You Want To Join Our Team?</p>
                </div>
            </section>

.wrapper.style5 {
            background-color: #D22362;
            color: #fff;
            border-top: 0;
            text-align: center;
            font-size: 50px;
            background-image: url("images/airc1.jpg");

        }

Upvotes: 2

Views: 9374

Answers (2)

Adam D. Ruppe
Adam D. Ruppe

Reputation: 25595

Well, there's a few options. The traditional answer would probably be to do a media query @media screen and (max-width: 600px) { .style5 { font-size: 20px; }} and adjust your font size there. You can also adjust line height so the large text doesn't overlap as it wraps to new lines.

But a less common option that works with new css3 that you might want to play with too is using vw units for your font-size instead of px. font-size: 3vw; or something.

A vw unit is defined as 1% of the viewport width (the window width basically). There is also vh for 1% of the viewport height. As the window resizes, the font size would resize with it, proportionally.

.wrapper.style5 {
            background-color: #D22362;
            color: #fff;
            border-top: 0;
            text-align: center;
            font-size: 50px; /* fallback */
            font-size: 3vw; /* new way, if supported */
            line-height: 120%;
            background-image: url("images/airc1.jpg");

        }
<section id="three" class="wrapper style5">
                <div class="inner">
                <p>Do You Want To Join Our Team?</p>
                </div>
            </section>

It doesn't work well in stack overflow's preview, but copy that out to your test page and give it a try, it might be just what you are looking for.

note: while vw has solid support in modern browsers, it isn't 100%, so you will probably want to pair it with a fallback option like a set font size and line height like the other answer gave so it can scale gracefully while large too.

Upvotes: 0

Johannes
Johannes

Reputation: 67776

Add a line-height setting, for example 120%:

.wrapper.style5 {
            background-color: #D22362;
            color: #fff;
            border-top: 0;
            text-align: center;
            font-size: 50px;
            line-height: 120%;
            background-image: url("images/airc1.jpg");

        }
<section id="three" class="wrapper style5">
                <div class="inner">
                <p>Do You Want To Join Our Team?</p>
                </div>
            </section>

Upvotes: 6

Related Questions