Adjusting font size in a responsive div using Bootstrap 4

I'm attempting to dynamically resize text within a div, similar to the functionality shown in this example.

As I resize the div, I want the font size to adjust accordingly.

I've tried using various relative length units in pure CSS for the text element, but it hasn't been successful. It seems that setting the font-size based on the div size (rather than viewport width) may require JavaScript.

<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>

<div>
  <p style="font-size: 2rem">Hello World</p>
</div>

What is the most effective approach for achieving this goal, ideally using Bootstrap 4 or pure CSS?

cssbootstrap-4

Answer №1

Take a look at this Inquiry. Onresize for div elements?

Here is how you can modify it:

var myElement = document.getElementById('my_element'),
    myResizeFn = function(){
        /* do something on resize */
    };
addResizeListener(myElement, myResizeFn);
removeResizeListener(myElement, myResizeFn);

Transform it to:

 var myElement = document.getElementById('my_element'),
    myResizeFn = function(){
        document.getElementById(*ID OF OBJECT*).style.fontSize = "20%"; //use % or vh/vw f.e.

    };
addResizeListener(myElement, myResizeFn);
removeResizeListener(myElement, myResizeFn);

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

How can I adjust the height and width of a checkbox input specifically for mobile screens?

Check out this code snippet: <div class="container-fluid mt-5"> <div class="row"> <div class="col-10"> Hello <br> Hello </div> <div class="col-2"> <input type="checkbox" class= ...

cssbootstrap-4

The background is obscured from view because of its current positioning

The issue I am facing is that the background color of the <ol> list is not showing correctly. This problem arose after I floated the label to the left and the input to the right. How can I resolve this? The desired outcome should be: My current resu ...

htmlcssposition

Tips for ensuring Marketo forms are responsive when integrated into a WordPress website

We are currently using Wordpress for our responsive website. Within the site, we have integrated Marketo forms (a marketing automation system) with custom CSS for styling. The issue we are facing is that while the forms appear fine on desktops, they cause ...

htmlcsswordpressformsmarketo

Exploring Media Queries Using Chrome Dev Tools

After an extensive search, it seems that the issue may lie in the fact that what I am seeking does not actually exist. When updating websites, I find myself constantly tracking down media queries. Is there a method to display all media queries for a speci ...

htmlcssgoogle-chromegoogle-chrome-devtools

Optimal method for creating a seamless loop of animated elements passing through the viewport

My challenge involves managing a dynamic set of elements arranged next to each other in a row. I envision them moving in an infinite loop across the screen, transitioning seamlessly from one side to the other, as illustrated here: https://i.stack.imgur.com ...

javascriptcssanimationgraphicsgsap

How can I style the inner HTML text of an element without altering the style of its subelements? (CSS Selector)

I created an html structure that looks like this: <p> This is some test inside the p tag <div class="some-class"> <div class="sub-div-class"> <i title="title test" data-toggle="tooltip" class="some-icon-class" data-ori ...

htmlcssdomcss-selectorsstyles

Angular is encountering a CORS issue with the "No Access-Control-Allow-Origin" error when trying to access a CSS file

Currently, in my Angular 5 application with a Web API back-end, my main goal is to reference a CSS file on a production server. I'm facing a cross-origin issue when trying to access the CSS file hosted on the IIS server website. Even though CORS is e ...

cssangularcross-domainaccess-control

Switching out the browser's scrollbar for buttons

I've been searching online for a solution, but so far I haven't found anything. Although, I'm pretty sure I've come across something similar to what I need before. Essentially, I have a large table created by the user that will likely ...

javascripthtmlcssangularjs

Displaying and Concealing Elements with AngularJS and Implementing Alternating Styles

Within my collection of div elements showcasing product information, there is a need to display or hide specific fields based on the product type. While this functionality works smoothly, we now aim to enhance readability by implementing alternating row st ...

cssangularjsangularjs-directive

Custom CSS Editor for Third Party Visual Studio Themes

Are there any reliable and user-friendly style sheet editors that can be integrated with Visual Studio? I recently came across a resource editor that surpassed the default version for opening .resx files. This got me thinking, there may be some advanced ...

c#asp.netcssvisual-studio-2010stylesheet

Issue with implementing custom fonts using @font-face

I've added custom @font-face styling to my CSS using a downloaded font, but it doesn't seem to be working. Below is my CSS code: @font-face { font-family: "Quicksand"; src: url("fonts/Quicksand/Quicksand-Light.otf") format("opentype"); } The f ...

htmlcssfont-face

Persistent Gap at the Top of the Page

I'm facing a simple issue that I can't seem to solve. At the top of my page, there's a white space about the width of a finger, and when inspecting it, nothing seems to be highlighted. @import url('https://fonts.googleapis.com/css?fa ...

htmlcssbootstrap-5

Modify the background color of <td> elements depending on the specific value

I attempted to implement this approach, but unfortunately it is not working as expected. I found guidance from this source. Below is the code I am using: $today = date('Y-m-d'); $date = new DateTime(); $R1D2 = $date->setISODate($year,$week,1 ...

phphtmlcss

Explore the power of Infinity.js for optimizing the rendering of large HTML tables, complete with a detailed example using prototype

Is there a way to efficiently load/render large html tables without compromising performance, especially in Internet Explorer? I recently came across a plugin in prototype.js (https://github.com/jbrantly/bigtable/, post: , demo:) that addresses this issue ...

javascriptjquerycsshtml-table

Beautiful prompt interface for HTML

I'm attempting to create a sweet alert using the HTML option: swal({ title: "HTML <small>Title</small>!", text: "A custom <span style="color:#F8BB86">html<span> message.", html: true }); Instead of just text, ...

javascripthtmlcsssweetalert

Ways to shorten text on mobile screens using CSS

Is it possible to use CSS to truncate text based on the current screen size or media queries? For example, consider this paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor ...

cssresponsive-designtruncate

Adjusting the background color of the custom input range thumb when the input is disabled

I've customized the input thumb on my range slider, and I'm looking to change its color when it's disabled. I attempted adding a class to the thumb like this: input[type=range]::-webkit-slider-thumb.disabled and also tried adding the disa ...

cssangulartypescript

Not compatible with certain browsers, scrollable wrapper in fullscreen

I am looking to create a unique layout with a fullscreen div on top of a footer. The main element (#wrapper) should have a fullscreen background image and be scrollable to reveal the footer underneath. Check out my code on JSFiddle: https://jsfiddle.net/t ...

htmlcss

What is causing the height:auto property to not function on these two elements?

I am facing an issue where the main-div and footer-div are not growing with the content as expected. While setting the height to auto works fine for the footer, it messes up the page for the main content. Specifically, the footer ends up taking over the en ...

csslayouthtml

Mastering the art of gracefully transitioning to a fallback option when CSS grid

When it comes to creating a simple grid of squares (3x3 at most, filling in top to bottom left to right), I have encountered challenges with both flexbox and grid. The DOM structure required for each method seems incompatible or too complex to support both ...

htmlcssflexboxcss-grid