CODEWITHSUNDEEP
htmlcss
Jason W
Jason W

Reputation: 738

Font Size Not Responsive

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)?

Upvotes: 0

Views: 138

Answers (1)

Adam Jenkins
Adam Jenkins

Reputation: 55613

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.

Upvotes: 1

Related Questions