Change the size of text automatically in a div while ensuring it is responsive

Question

Change the size of text automatically in a div while ensuring it is responsive

I am looking to merge two functional JSFiddle projects and have them work in conjunction with each other.

JSFiddle-1 : http://jsfiddle.net/MYSVL/3050/

window.onresize=function() {
    var child = $('.artist');
    var parent = child.parent();

    child.css('font-size', '18px');

    while( child.height() > parent.height() ) {
        child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px");
    }

The content within the artist container in this project is responsive, adjusting to the maximum font size when the screen is larger, and minimizing to smallest font size on a smaller screen.

JSFiddle-2 : http://jsfiddle.net/MYSVL/3047/

function calcDivHeights() {

     window.onresize=$(".artist").each(function () {

        var child = $(this);
        var parent = child.parent();

        //child.css('font-size', '18px');
        while (child.height() > parent.height()) {
            child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px");
        }

    });
}

In this second project, the function is examining every artist div and readjusting the font size based on the while condition. However, I am facing difficulties in making it responsive like my JSFiddle-1. Once the text size decreases, it remains small even if I enlarge the screen. I aim for JSFiddle-2 to operate exactly like JSFiddle-1, ensuring that the text responsive adapts to the screen size.

If anyone can assist me or modify my JSFiddle-2 to achieve this objective, I would greatly appreciate it.

Thank you in advance.

javascript jquery html css

Answer 1

Answer №1

It appears that there are no notable differences between the two fiddles you've provided, with the exception of the commented code child.css('font-size', '18px'). Both should function in a similar manner.

The second fiddle seems to encounter issues when the window is resized to a smaller resolution, causing the height of child to be equal or smaller than that of parent. Subsequently, upon returning to a larger resolution and running

while( child.height() > parent.height() )

, the condition fails as the child's height is no longer greater than the parent's.

To address this issue, consider implementing the following solution:

$(document).ready(function () {

function adjustFontSize() {
    var child = $('.artist');
    var parentHeight = child.parent().height();
    while( child.height() > parentHeight ) {
        child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px");
    }
    while( child.height() < parentHeight ) {
        child.css('font-size', (parseInt(child.css('font-size')) + 1) + "px");
    }
};

adjustFontSize(); // Executed on document ready
window.onresize = adjustFontSize; // Triggered on window resize

});

.artist-container {
    width: 20%;
    height: 40px;
    border: 1px solid black;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="artist-container">
    <div class="artist">Audhit Audhit Audhit Audhit Audhit Audhit Audhit</div>
</div><br>
<div class="artist-container">
    <div class="artist">Lorem</div>
</div><br>

Answer 2

It appears that there are no notable differences between the two fiddles you've provided, with the exception of the commented code child.css('font-size', '18px'). Both should function in a similar manner.

The second fiddle seems to encounter issues when the window is resized to a smaller resolution, causing the height of child to be equal or smaller than that of parent. Subsequently, upon returning to a larger resolution and running

while( child.height() > parent.height() )

, the condition fails as the child's height is no longer greater than the parent's.

To address this issue, consider implementing the following solution:

$(document).ready(function () {

function adjustFontSize() {
    var child = $('.artist');
    var parentHeight = child.parent().height();
    while( child.height() > parentHeight ) {
        child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px");
    }
    while( child.height() < parentHeight ) {
        child.css('font-size', (parseInt(child.css('font-size')) + 1) + "px");
    }
};

adjustFontSize(); // Executed on document ready
window.onresize = adjustFontSize; // Triggered on window resize

});

.artist-container {
    width: 20%;
    height: 40px;
    border: 1px solid black;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="artist-container">
    <div class="artist">Audhit Audhit Audhit Audhit Audhit Audhit Audhit</div>
</div><br>
<div class="artist-container">
    <div class="artist">Lorem</div>
</div><br>

Answer 3

Answer №2

CSS media queries are a game-changer when it comes to creating responsive web designs. Instead of relying solely on Javascript for all calculations, using media queries can streamline the process.

When designing for responsiveness, it's helpful to consider three main sizes:

Phone (approximately 400px width)
Tablet (around 800px width)
Computer (greater than 800px width)

One effective way to implement this is by adopting a "desktop-first" approach:

/* DESKTOP */
body {
  font-size: 1em;
  ...
}
...
/* General rules for desktop
...

/* TABLET */
@media screen and (max-width: 800px) and (min-width: 400px) {
   /* Adjust specific rules here */
   body {
      font-size: .75em;
   }
   ...
}

/* PHONE */
@media screen and (max-width: 400px) {
   /* Modify styles accordingly */
   body {
      font-size: .75em;
   }
   #div1 {
      height: 20%;
   }
   ...
}

Additionally, utilizing relative units like em, vw, vh, rem, and percentages can enhance flexibility in your design.

For further insights on responsive web design, check out this informative resource.

Answer 4

CSS media queries are a game-changer when it comes to creating responsive web designs. Instead of relying solely on Javascript for all calculations, using media queries can streamline the process.

When designing for responsiveness, it's helpful to consider three main sizes:

Phone (approximately 400px width)
Tablet (around 800px width)
Computer (greater than 800px width)

One effective way to implement this is by adopting a "desktop-first" approach:

/* DESKTOP */
body {
  font-size: 1em;
  ...
}
...
/* General rules for desktop
...

/* TABLET */
@media screen and (max-width: 800px) and (min-width: 400px) {
   /* Adjust specific rules here */
   body {
      font-size: .75em;
   }
   ...
}

/* PHONE */
@media screen and (max-width: 400px) {
   /* Modify styles accordingly */
   body {
      font-size: .75em;
   }
   #div1 {
      height: 20%;
   }
   ...
}

Additionally, utilizing relative units like em, vw, vh, rem, and percentages can enhance flexibility in your design.

For further insights on responsive web design, check out this informative resource.

Change the size of text automatically in a div while ensuring it is responsive

Answer №1

Answer №2

Similar questions

Using the explode function to parse an XML file and extract the data into a unified array output

Initiating a AJAX upload upon selection of a specific option from a select menu

Detecting the Presence of 5 Consecutive Numbers in an Array using JavaScript

Is it possible to customize the background color of select2 boxes separately for each option?

The alignment of the ml-auto class is not properly positioning the navbar links to the right

I'm having trouble sending my data correctly using Ajax with the JSON data type

selenium cannot detect the button's visibility even though it has been fully loaded

Obtaining Serialized Data

Interacting with Django backend via AJAX to trigger Python functions using jQuery/AJAX

Preventing Vue.js SPA from accessing cached version when JWT expires: the solution

Is there a way to use CSS to swap out the content of one HTML element with another HTML element's content?

Regular expressions tailored for a precise format in JavaScript

Mastering the art of looping through an array efficiently in jQuery using AJAX without unnecessary repetition

"Maximizing Efficiency: Chaining Several Actions Using the JavaScript Ternary Operator

When the form is submitted, the value is not refreshed if the button is exited

"Every time a sanity check is performed, an empty array is returned

Review Limited Screen Size for a Smartphone Website

I am facing issues with utilizing if endif for my Internet Explorer stylesheet in HTML/CSS

Tips for creating a function to assign a CSS width using a JavaScript variable?

Retrieve the data in the format of [1,2,3] from a MySQL database by employing PHP and jQuery