How can I make the font size adjust to perfectly fill the entire width of the parent div?

I am attempting to dynamically adjust the font size of a h1 element so that it fills 100% of the width of its parent div.

Despite trying various plugins like fittext.js, slabtext.js, and bigtext.js, I have yet to find one that achieves the desired effect.

Can anyone suggest a solution for achieving this effect for the .sectionTitle h1 elements in the example provided below?

Codepen: https://codepen.io/anon/pen/NpYJKK.

Sample HTML:

 <section id="contact">

   <div class="sectionContent">

     <h1 class="sectionTitle">Contact</h1>

   </div>

 </section> 

Answer №1

FitText.js is the perfect solution for your needs.

To get started, download the required js files, and then insert this line into your code:

jQuery(".sectionTitle").fitText(.5);

Keep in mind that a compression value of .5 was found to be necessary in order to achieve full width text stretching.

Check out the codepen demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Circular Segment Button in Ionic 2

Is there a way to change the appearance of a segment button from square to round using CSS? https://i.sstatic.net/KRjSh.png I attempted to use traditional CSS, but encountered issues when Ionic2 attempted to transform the button on segment-activated. You ...

When checking the form action property in IE6, make sure to account for forms that have a field specifically named "action."

If I have the following form: <form id="myForm" action="index.php"> <input type="hidden" name="action" value="list" /> <input type="submit" /> </form> How do I retrieve the value of the action attribute of the form (index. ...

Implementing the <p></p> tag within a loop practice session

Hello, I am currently stuck on a looping exercise and I could use some assistance. I need to display each iteration of the loop inside a < p > </ p > tag Looping away Looping away Looping away Looping away Looping away Below i ...

Can a photo frame app be created using PhoneGap?

I'm looking to develop an application where I can capture a picture, crop the face of a person, and then embed this face into a frame. Is there a solution using PhoneGap for this task? Can anyone provide some ideas on how to get started? Thank you i ...

What is the process for modifying the value of a concatenated string?

I have a scenario where I need to extract the date of a blog post from one page on a website and display it on another page within the same site. Initially, the date is shown as 2/22/18 on the first page. With the jQuery code provided below, I am able to ...

Click a label to activate the JQuery datepicker widget

I am trying to implement a jQuery datepicker that shows up when I click on a specific label. My HTML code looks like this: <label id="start_date_label">Start Date</label><input style="display:none;" id="start_date" /> Here are the jQuer ...

How can I redirect to a different page with a keypress event in Next.js?

I am looking to implement a redirection function in nextjs when users press a key. There is a search input field where users can type and then hit the enter key to navigate to another page. Here's what I have attempted: const handleKeyPress = (e) = ...

ControlsContainer - jQuery object for Flexslider

I recently tried to implement a flexslider with controls in a separate div using the controlsContainer option provided by flexslider. The setup consists of a left column containing the slider code (".flexslider-small"), a right column with text, and the c ...

Having trouble centering text vertically in game grid using flexbox styling

I'm working on creating a tic-tac-toe game, but I'm struggling to get the x and o marks to align properly both vertically and horizontally. Take a look at my code below. The "marked" values are the ones containing letters: ul { display: fl ...

Storing JavaScript code in a PHP variable fails to function

I've encountered an issue with my JavaScript code. <script> $(document).ready(function(){ $('.delete').click(function() { alert('passed'); }); }); </script> Everything work ...

TreeView Filtering

I have encountered an issue while trying to utilize a treeview filter. Below is the method I have created: var tree = [{ id: "Tree", text: "Tree", children: [ { id: "Leaf_1", text: "Leaf 1", childre ...

Challenges with the insertedCount in Express and MongoDB

I am facing an issue with using "insertedCount" in MongoDB in a NodeJS project. Upon calling the "insertOne()" method, the const assigned does not allow me to access the insertedCount value as it returns "undefined". Below is my app.js code: const { MongoC ...

Troubleshooting: Why isn't my Angular directive being updated by the controller?

My directive is responsible for displaying a detail screen when a row is clicked. I am currently working on updating the encounter within this directive. Take a look at the code below: angular.module('app').directive('chatContainer', f ...

View information on Android without the need for any HTML formatting

I have a SQLite table filled with records that contain HTML tags. I need help figuring out how to properly display these records in my application so that users only see the actual content without the tags. Any ideas on how to achieve this? Below is the c ...

A beginner's guide to using Jasmine to test $http requests in AngularJS

I'm struggling with testing the data received from an $http request in my controller as I don't have much experience with Angular. Whenever I try to access $scope, it always comes back as undefined. Additionally, fetching the data from the test ...

Issues with Angular 5 components not functioning properly

I am experimenting with a way to show/hide a div based on a boolean value from an observable. After looking at the second answer in this Stack Overflow thread, I implemented the following code snippet that retrieves the document body width and uses it in a ...

How can Selenium and Python be used to refresh a webpage until a specific item is found?

I'm attempting to continuously refresh the page until a specific item appears, but my current code is not working. I took inspiration from this solution: python selenium keep refreshing until item found (Chromedriver). Below is my code snippet: whil ...

Issues encountered when using .delay() in conjunction with slideUp()

Issue: The box is not delaying before sliding back up on mouse out. Description: Currently, when hovering over a div with the class ".boxset" called "#box", another div "#slidebox" appears. Upon moving the mouse away from these two divs, #slidebox slides ...

DataTables does not automatically generate a new row for buttons

I'm attempting to accomplish a similar layout as seen here: https://datatables.net/extensions/buttons/examples/initialisation/multiple.html Every time I execute this code, it gives me an error saying "table is not defined"... <script> function ...

Issue: Unable to locate module 'js-yaml' while executing npm start command

Unable to locate module 'js-yaml' Require stack: D:\REACT NATIVE\portfolio\node_modules\cosmiconfig\dist\loaders.js D:\REACT NATIVE\portfolio\node_modules\cosmiconfig\dist\createExplore ...