Font Size Not Responsive

Question

I have this JSFiddle

body
{
    background: rgb(111,111,111);
}

#Banner
{
    width: 100%; /*1200px*/
    height: 800px;
    background: url("http://www.firstdayfwb.com/images/header.jpg") no-repeat 55%;
    background-size: contain;
}

#Mission
{
    padding-top: 750px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    font-size: 250%;
    font-weight: bold;
    text-align: center;
}


<body>

        <div id="Menu">

        </div>

        <div id="Banner">

            <h1 id="Mission">Creating a Church Unchurched People Love to Attend</h1>

        </div>






    </body>

I'm trying to make my font size of H1 (id missions) to be responsive and change it's size based on it's container's size. I have tried multiple things, and changing the percentage is the closest I have come; however, it's still not working like I would like it to.

Any ideas on how to fix my font size to where it will resize the font based on the container's size (when the browser window gets resized)?

This looks ok to me? But, if you need more: http://simplefocus.com/flowtype/, maybe this? — sinisake, Oct 03 '14 at 15:54
This answer might help: http://stackoverflow.com/questions/15574823/font-size-relative-to-container A pure CSS solution could be using multiple media queries to change the font size or using vh and vw units: http://css-tricks.com/viewport-sized-typography/ — ncardeli, Oct 03 '14 at 16:02

score 1 · Accepted Answer · answered Oct 03 '14 at 17:22

Unfortunately, no, this is where css media queries fall a little short. You cannot detect and change, purely with CSS, the font based on the container's size, only the screen size. You'll have to use JavaScript (e.g. fittext) in order to accomplish what you want.

Font Size Not Responsive

1 Answers1