What are some ways to ensure that text can adapt to the size of a

I am looking to create dynamic text that adjusts based on the size of its parent container. As the parent container's size changes, I want the text to automatically adjust accordingly.

Specifically, I want the text in a widget to resize when the widget itself increases or decreases in size.

Currently, I am achieving this using @media queries:

@media (min-width: 768px) and (max-width: 1440px) {
  .widget-header-title{
    background-color:white;
    border-bottom:1px solid #F0EEF0 !important;
    font-weight:200;
    font-size:22px;
    color:black;
    text-align:center;
  }
  /*For time widget Only*/
  .ticketSummaryTime {
    font-weight: bold !important;
    font-size: 165px !important;
    text-align: center !important;
  }
  /*For time widget Only*/
  .ticketSummary {
    font-weight: bold;
    font-size: 180px;
    text-align: center;
    margin-top: 75px;
  }
  .widget-bottom-status{
    font-weight:200;
    padding:5px;
    margin-top:30px;
    font-size:12px;
    color:grey;
    text-align:center;
    border-top:1px solid #F0EEF0 ;
  }
}
javascriptjqueryhtmlcssfrontend

Answer №1

Check out this Fiddle example: https://jsfiddle.net/raskarvishal7/z8kdrqw7/

Give it a try...

This is the HTML code snippet:

<div class="wrapper">
  <div class="leftimg">
    <span>I am an image</span>
  </div>
  <div class="rightside">
    <div class="project-title">
      <h1>I Am Main Title</h1>
      <h2>Sub title<h2>
    </div>
    <div class="context">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
    </div>
  </div>
</div>

And here is the corresponding CSS:

.wrapper {
  max-width: 1200px;
  width: 100%;
  margin-left: 10px;
  background: #3c3c3c;
  overflow: auto;
}
.leftimg {
  width: 300px;
  height: 600px;
  background: #8cceff;
  float: left;
}
.rightside {
  background: #F96;
  overflow: auto;
}
.project-title {
  font-family: 'Abel';
  color: #FFF;
  margin-left: 40px;
  font-weight: 300;
}
.project-title h1 {
  font-size: 2.5rem;
}
.project-title h2 {
  font-size: 1.4em;
}
.context {
  color: rgba(255, 255, 255, 0.7);
  margin: 20px 0 0 40px;
}
.context p {
  font-size: 1.06rem;
  line-height: 1.6rem;
  font-family: 'Roboto Condensed';
  font-weight: 300;
}

Answer №2

If by "adjusting the text" you are referring to changing the font size, then using media queries is the correct approach. Media queries are designed for this purpose.

While it is possible to achieve this with JavaScript, I would advise against it.

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

Struggling to integrate an audio player specifically for mp3 files and feeling quite perplexed by the process

I'm struggling with implementing an audio player for a file sharing platform, specifically only for .mp3 files. I have successfully implemented a function for images (.jpeg and others), but I am unsure how to do the same for mp3 files. function is_au ...

javascriptphphtml

Transitioning from the older version of Angular (1.0.8) to the newer version (1.2.0

Transitioning to the latest production version of Angular has been quite challenging for me. I have meticulously followed the migration guidelines, focusing mainly on the underscore prefix \ private attributes section that seemed relevant to my situa ...

javascriptangularjsmigration

Extracting the magnifying glass from the picture

After implementing a function to add a magnifying glass (.img-magnifier-glass) on button click, I am now looking to remove the glass by clicking the "cancel" button. However, I am unsure of how to write this function to interact with the "magnify" function ...

javascripthtmlcssfunction

Tips for effectively passing state from a parent component to a child component without losing it

I created a view displaying all posts with a filter above them. Users can customize their view by selecting different options on the filter, resulting in updated posts being shown. However, if a user clicks on a post after applying filters, the parent com ...

javascriptvue.jsvuejs2vue-componentvuex

Can someone assist me in figuring out how to solve selecting multiple radio buttons at once

<script type="text/javascript"> let x = "1.html"; let y = "2.html"; function redirectPage(form){ for(let i=0; i<form.length; i++) { if(form.answerq[i].checked && form.answerw[i].checked && f ...

javascripthtmlcssradio-button

The implementation of SetInterval within nested functions in JavaScript appears to be malfunctioning

I am a beginner in the world of JavaScript and I am currently attempting to incorporate the setInterval method within functions in Js. JavaScript Code: var tar = document.getElementById("sample"); function dataSample(tar) { //setInterval ...

javascripthtml

Are there ways to incorporate a variable within a Regular Expression in Javascript?

I've already checked the Mozilla website and W3schools, but I can't seem to find the solution. var modifyString = function (string1, string2) { if (string2.match(string1)) { string1 = new RegExp(string1); string2 = string2.replac ...

javascriptregex

Incorporating a jQuery plugin within the NextJS framework

I am facing difficulties integrating a jQuery plug-in that is six years old. I have attempted to use the findDOMNode module from react-dom, as well as following the integration method outlined in the React Official Docs, but unfortunately, none of these m ...

jqueryreactjsnext.js

What is the best way to transform height in pixels to percentage in order to create a responsive design that adjusts smoothly on

Currently, I am in the process of developing a responsive grid system by using a max-width of 980px to convert my fixed PX widths to percentages. However, I am facing some challenges in updating the heights that are also set in PX to %. Could anyone provid ...

cssresponsive-design

Breaking down numerous requests into chunks in JavaScript: A step-by-step guide

I am facing a situation where I have multiple requests to make, but they cannot all be called simultaneously. Therefore, I came up with a solution to split the set of requests into chunks of 10. I'm curious about how I can handle making these 10 reque ...

javascriptrequest-promise

Setting the $dirty flag to true when a value is entered in the text box, but not the other way around

When I enter a value in the text box, myForm.$dirty gets set to true. However, the flag does not revert back to false when I delete all values from the text box. Why is this happening and how can I fix it? <input name="input" ng-model="myModel.text"& ...

javascriptangularjsangularjs-directive

What is the best way to swap out text for an image in CSS?

I came across a website that I am working on: The site features a slider with 2 tabs named "TAB1" and "tab2" My goal is to replace the text with unique images for each tab Below is the CSS code snippet: .dnd-tabs.dnd-tabs-style1 .ui-tabs-nav li.ui-tabs ...

htmlcss

The AJAX data submission did not go through as expected

I am facing an issue with two files on my site - home.php (view) and home.php (controller). In the home.php (view) file, I have a jQuery function that sends an AJAX request based on the W3 example. However, in the home.php (controller) file, the PHP variab ...

phpjqueryajax

Internet Explorer: JQuery deselects radio button upon its selection

One issue I have encountered is with a listener for a group of radio buttons in IE. When a radio button is selected, it triggers a database call to populate a select element. However, in IE, after the code runs successfully, the selected radio button becom ...

javascriptjqueryhtml

Execute the function at intervals of 2 seconds until the variable is altered

Is there a way to make sure that the interval function stops running once theImage length exceeds 0? The Code I'm Using var theImages = $('.awesome-slider .slides img'); function checkImages(){ theImages = $('.awesome-slider .sli ...

javascriptjquery

To close the menu, simply tap on anywhere on the screen

Is there a way to modify a script so that it closes the menu when clicking on any part of the screen, not just on an 'li' element? $(function() { $('.drop-down-input').click(function() { $('.drop-down-input.selected').rem ...

javascriptjqueryhtmlcss

JavaScript Functions for Beginners

I'm currently facing some challenges with transferring the scripts and HTML content from the calendar on refdesk.com. My task involves moving the JavaScript to a separate stylesheet and utilizing those functions to replicate the calendar on an HTML pa ...

javascripthtmlcalendar

The value could not be retrieved because the input name depends on the array index

To determine the name of the input based on the array index, use the following method: <div id="editAboutSantences<%=i%>" class="edit-container"> <div class="input-container"> <label> content: </label> ...

javascriptnode.jsexpressejs

What are the acceptable ID attribute values to use with JQuery selectors?

Can you tell me what the acceptable values are for the ID attribute in HTML elements when utilizing JQuery selectors? Is JQuery conforming to HTML4 or HTML5 rules regarding the ID attribute? ...

jqueryhtmljquery-selectorshtml4

Utilizing a hidden file-input, IE10 is able to transmit a FormData object via ajax

I'm encountering difficulties when trying to send a form that includes a display:none file-input via ajax. It works fine in Chrome (46.0.2490.71), but not in IE10 (10.0.9200.17492). I've tried various solutions without success, and it's cruc ...

javascriptajaxhtmlfile-uploadinternet-explorer-10