Creating a CSS style that automatically adjusts the font size within a container that spans the full height of the

Issue: I have a container set to 100vh, but as the screen size changes, I want the font size to adjust accordingly and always stay within the container without overflowing.

Thoughts: While I understand this can be achieved easily with @media CSS rules, I'm curious if it's possible to accomplish this without using @media or dynamically.

Fiddle: https://jsfiddle.net/wm0n4mys/

.container{
  border:1px solid black;
  text-align:center;
  height:100vh;
}
h2{
  font-size:60px;
}
*{
box-sizing:border-box;
padding:0;
margin:0;
}
<div class="container">
  <h2 class="main">A compelling headline that illustrates a significant concept in a bold way</h2>
  <p class="text">Exploring the depths of something profound while keeping it concise yet impactful.</p>
</div>

javascripthtmlcss

Answer №1

Try using 'vw' or 'vh' as the unit for font size

.wrapper{
  border:1px solid black;
  text-align:center;
  height:100vh;
}
h2{
  font-size:5vw;
}
*{
box-sizing:border-box;
padding:0;
margin:0;
}
<div class="wrapper">
  <h2 class="mainTitle">A TITLE THAT'S TALKING ABOUT SOMETHING BIG AND THIS IS A PRETTY BIG TITLE, MAN I GET IT YO</h2>
  <p class="textContent">Something, Something, Something, Something, Something, Something Something Something Something Something SomethingSomething SomethingSomethingSomethingSomethingSomethingSomething</p>
</div>

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

Associate the callback function with a directive that does not have an isolated scope

Ensuring the correct context when binding a callback function to a directive is crucial. When working with an isolated scope, this task is easily accomplished. <bar-foo callback="mycontroller.callback()"></bar-foo> The directive code: ... ...

javascriptangularjsangularjs-directive

I'm working on creating an HTML page and I'm looking to change the up-arrow and down-arrow icons to a star and an information "i". Can anyone recommend how to

<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name ...

htmlcssmaterialize

"Utilizing Mootools to dynamically load content using a custom function

I am currently utilizing mootools and have a desire to load content into a div labeled response. To achieve this, I use the following JavaScript code: $('response').set('html', content), where 'content' is a variable containin ...

htmlajaxmootools

When moving from Babel version 5.8.35 to 6.0.0, be prepared for app.js to throw a SyntaxError and encounter an unexpected token during compilation

Currently, I am in the process of enhancing my ReactJS components using webpack. However, I have encountered a hurdle while trying to transition from babel version 5 to 6. Upon attempting the upgrade, it resulted in a stack trace error within my app.js cl ...

javascriptreactjsnpmwebpackbabeljs

Employing the new operator in conjunction with a variable

Is there a way to achieve the following scenario: var foo = function(){ this.value = 1; } var bar = "foo"; var baz = new bar(); alert(baz.value) // 1 Specifically, I am looking for a method to instantiate an object using its string name. Any sugge ...

javascriptnew-operator

Define the width and height of images specifically for screens with a maximum device width using @media queries

Having some trouble with the sizing of images on mobile devices. Using the code below, but for some reason, the height remains at 13em on smartphones, despite setting it differently for other devices. Any ideas why this might be happening? @media only sc ...

htmlcssimagelayoutheight

TypeScript interface with an optional parameter that is treated as a required parameter

Within my interface, I have a property that can be optional. In the constructor, I set default values for this property, which are then overridden by values passed in as the first parameter. If no properties are set, the defaults are used. I am looking fo ...

javascripttypescript

Is there a way to convert html content into a pdf file using phantomJs in a node.JS environment?

Is there a way to use phantom.js in node.js to create a pdf file with html content and display it in the browser? ...

htmlnode.jspdfphantomjs

How can require.js be effectively used in conjunction with web workers?

As of now, my current project involves the task of transitioning an existing web application to require.js. Most aspects of the process are proceeding smoothly, except for the functionality that utilizes web-workers. One such example is a worker defined in ...

javascriptthree.jsrequirejsweb-worker

Unable to transfer array elements to a function within PhantomJS

I am facing a challenge in extracting the source code from multiple webpages simultaneously. The links are stored in an array from a source text file. While I am able to successfully loop through the array and display the links, I encounter an issue when p ...

javascriptarraysphantomjs

Having trouble setting permissions with Node ACL?

Struggling to determine how to assign user roles and permissions using Node ACL as a newbie in the MEAN stack. I still haven't grasped the workings of node or javascript framework. The goal is to implement a registration system where newly registered ...

javascriptnode.jsacl

Can PHP's CURL handle cookies?

Recently, I set up a poll using PHP that allows voting without the need for an account. However, I became concerned about the possibility of the poll being vulnerable to hacking and spam votes. I discovered that I could potentially vote multiple times by ...

javascriptphpajaxcurl

Create a variable in Angular to determine the selected array

I have a JSON array and I am displaying the items in a select element. When an item is clicked, a new select is generated for any subarray items. If you follow this link, you can see exactly what I mean. Everything is working well so far, but I'm ha ...

javascriptjqueryarraysangularjsselect

Utilize Ionic and Angular to display the local storage value within a text box

I am in the process of developing an application using the Ionic framework. I am able to upload files to the server and receive a response, which I then save the file name in localstorage. However, I am facing an issue where I need to display this value in ...

javascriptangularjsionic-frameworklocal-storage

Collaborative gaming experience with three.js and socket.io

I created a basic scene in three.js that I find really fun to interact with. However, I wanted to enhance it by adding multiplayer functionality through a socket.io server. To achieve this, I prompt the user for their username: var username = prompt("what ...

javascriptnode.jssocket.iothree.jsmultiplayer

Is the Browser not Opening when Running npm start with webpack Due to a Peer Dependency Issue with [email protected] and webpack@^4.0.0?

I just started learning JavaScript and decided to explore the webpack-starter project on GitHub (https://github.com/wbkd/webpack-starter). Following the instructions, I cloned the repository and ran npm install in the project folder. Upon encountering a lo ...

javascriptnode.jsnpmwebpack-dev-serverwebpack-dev-middleware

Creating a bootstrap carousel configuration

I recently encountered a problem while using a single bootstrap carousel. The carousel contains multiple items/images to display, with one of them needing to be active initially. Below is the code snippet: <div id="myCarousel" class="caro ...

javascriptphphtmlcssbootstrap-4

Is there a way to make the product list view in Magento much more compact and smaller in size?

My issue is pretty straightforward. I find Magento's product display in list view to be too large for my liking. The images are bigger than necessary and each product takes up too much space. I want to resize the listing so that each product only occu ...

htmlcssmagento

"Using jQuery to target elements in the HTML Document Object Model

Is there a way to retrieve the outer HTML of a selected object using jQuery? For instance, if I have: $("#test.test_class") how can I convert it into an HTML string like this: <div id="test" class="test_class"></div> If anyone knows how to ...

jqueryhtml

Tips for avoiding event listeners from being triggered multiple times

Implemented an event listener on an HTML element that was retrieved by className within the render method of highcharts, but for some reason, the listener is being triggered twice. The issue seems to be with the onClick handler in the highchart's rend ...

javascriptreactjshighcharts