How to create responsive font size

Question

I'm trying to put some text on my slideshow and have the size of the font be responsive. I found this question:

How to create responsive text on top of an image?

which is pretty similar to what I'm trying to accomplish. I've been working at it and utilizing the font-size and line height percentages but it doesn't seem to be doing anything. So far my code looks like this:

HTML:

<div>
 <div>
  <div class="ec_slideshow">
   <ul class="bxslider"> <!--slideshow that I found on the interwebz-->
    <li><div class="ec_slidecontainer">
     <img src="http://enviroptics.com/Matt/Transparent%20photos%20in%20progress/Vision_System_Flow_Cell_1200x400.png" alt=""/>

     <!--This is the text that I want to be responsive-->
     <h2 class="ec_slidecontent"><span>Bubble Analysis<br/>Possible Subtext</span></h2>
     <!--End of text that I want to be responsive-->

    </div></li>
   </ul>

CSS:

    .ec_slideshow {
    width: auto;
    max-width: 1200px;
    height: auto;
    border: 2px solid black;
    /*background-color: cyan;*/
    text-align: center;
    font-size: 20px;
    margin: 20px auto 0px auto;
    padding-bottom: 0px;
    z-index: 1 !important;
    }

    .ec_slidecontent span {
    position:    absolute !important;
    top:         0px;
    left:        30%;
    font-family: 'roboto' !important;
    font-size:   100% !important;
    color:       #fff !important;
    padding:     3px 10px !important;
    width:       40% !important;
    line-height: 100% !important;
    background:  rgb(0, 0, 0);
    background:  rgba(0, 0, 0, 0.7);
    }

   .ec_slidecontent {
   margin: 0px !important;
   padding: 0px !important;


   .ec_slidecontainer img { 
    position: relative; 
    width: 100%; /* for IE 6 */
    }

There are other HTML elements and css and js stuff going on in this page so maybe something font related is being inherited from somewhere else, or maybe I just have no idea what I'm doing. Either way, it may just be easiest to look at this page http://www.enviroptics.com/envirocam.html and resize the window to see what's going on.

From looking through the tools, you're not actually targeting the correct element. If you use Developer Tools, you can see that the `font-size` is being over-written by this `#rot #rot_ctr1_bod_ctr3_bod_wrp1 h2` — zik, Jan 26 '17 at 16:15
@minorcase I can use javascript, and i can use jQuery up to 1.11 I believe — Matthew Sirkin, Jan 26 '17 at 16:27
@Kiz Ah, okay I see that. I went into the chrome editor and found that class and unchecked the font-size: 22px. The font-size got much larger, however still not responsive. Is there anything else you see? In my case i'm working off an automated editor that creates ids for me, so anything with the #rot_... was created automatically. I try using important tags to overwrite it but that doesn't always work — Matthew Sirkin, Jan 26 '17 at 16:31

score 0 · Answer 1 · answered Jan 26 '17 at 16:10

0

Don't use pixels for your font size. Try em,rem or % based values instead of pixels.

you can also refer this link https://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-fonts/

answered Jan 26 '17 at 16:10

Rahul

4,294
1
10
12

Okay, Ive been trying to avoid pixel font-sizes. Even when I remove the font-size from my ec_slideshow class as well as from the id mentioned by @Kiz above, it still seems like it's being over written by something. – Matthew Sirkin Jan 26 '17 at 16:34

score 0 · Answer 2 · answered Jan 26 '17 at 16:38

0

Here is a helper function I have used in the past for situations like this. I hope jQuery can get you the numbers you need to make it work! This allows you to set font sizes in rems (which means it is based off of the html font size) and then modify the html element font as you resize you screen. ScreenWidth can either be the width of your browser window or the width of the element containing your content.

function getFontSize(screenWidth) {
    "use strict";
    var fontSize = 10,   // this is the base font size. All other sizes are computed based on this number
        maxWidth = 1024, // max size of content on a page
        minSize = 5;     // smallest base font size allowed

    if (screenWidth < maxWidth) {
        // font size is computed by the ratio of screenWidth to maxWidth
        fontSize = Math.max((screenWidth / maxWidth) * fontSize, minSize);
    }

    return fontSize; //font-size is then applied to the html element of your page
}

answered Jan 26 '17 at 16:38

minorcaseDev

181
5

Okay i can give this a shot. I'm not very familiar at all with Jquery/Javascript. Can you possibly tell me exactly what I'm meant to do with the input (ScreenWidth) and output (fontSize)? i.e. How do i set my browser width or element width to the input 'ScreenWidth' specifically in my HTML? – Matthew Sirkin Jan 26 '17 at 16:53
`screenWidth = window.innerWidth` then `$("html").css("font-size", getFontSize(screenWidth))` if you need to get an element, see this http://api.jquery.com/width/ basically it will look like screenWidth = `$("").width()` then call the function again like above. – minorcaseDev Jan 26 '17 at 17:11
Thanks, I added it in, but I don't think it's compatible with what I'm using :( Thanks for the attempt though – Matthew Sirkin Jan 27 '17 at 14:03

How to create responsive font size

2 Answers2