relative font sizing based on parent element

My container is flexible in size, adjusting based on how the user moves elements around the screen. Inside this container, there is both an image and text. The image takes up 80% of the height of the container while the text should take up the remaining 20%. However, I have encountered an issue where height: 80% works well for the image but font-size: 20% does not work as expected for the text. Using vm or vh is not a viable solution since the size is not directly related to the screen size.

htmlcssfont-size

Answer №1

I stumbled upon a helpful link that you might find useful: LINK

flexFont = function () {
    var divs = document.getElementsByClassName("flexFont");
    for(var i = 0; i < divs.length; i++) {
        var relFontsize = divs[i].offsetWidth*0.05;
        divs[i].style.fontSize = relFontsize+'px';
    }
};

window.onload = function(event) {
    flexFont();
};
window.onresize = function(event) {
    flexFont();
};
@font-face {
  font-family: "San Francisco";
  font-weight: 200;
  src: url("//applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2");
}

body, html {
    height:100%;
    width:100%;
    font-family: "San Francisco";
    font-weight: 200
}
.flexFont {
    height:8em;
    width:75%;
    background-color:#eeeeee;
    padding:1%;
    margin: 10px;
}

.smaller {
    font-size: 0.7em;
    background-color:red;
    width: 10em;
}
<div class="flexFont">
    <h2>This is FlexText:<br>Autoscaling by DIV width</h2>
    <div class='smaller'>... scaled by 0.7em</div>
</div>

<div class="flexFont">
    <p>Font size scales parallel to the container width.<br>Change window size to test.<p>
</div>

If you're looking to achieve this without VM/VH, a combination of javascript and CSS like the code provided above should assist in reaching your desired outcome.

Answer №2

When using a percentage value for the font-size property, it adjusts the font size based on the current font size of the document rather than taking up a percentage of the container's size. You can learn more about this by visiting CSS Font-Size: em vs px vs pt vs percent.

For instance:

/* Set the current font-size for the document */ 
html {
  font-size: 20px;
}

/* This will result in a font size of 4px for content inside this div */
div {
  font-size: 20%;
}

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

Fixed navbar at the bottom of the page that transitions to static when scrolling reaches a certain location

Is it feasible to achieve this using Bootstrap v3? After conducting extensive research, it appears that a custom solution may be necessary. In essence, I am working with a navbar positioned at the bottom of the content area. Upon page load, if the navbar& ...

javascriptjqueryhtmlcsstwitter-bootstrap

Top-notch loading icon using jquery

Recently, I embarked on the journey of learning Javascript and jQuery simultaneously, and to my surprise, it feels quite manageable. As I delve deeper into creating functions, I am currently working on displaying a loading image. While I initially used on ...

jquerycsshtml

Modify the JS/JQuery variable by utilizing the data entered into an HTML input field

I have implemented a javascript/ajax request on my advanced search page. <script> // window.setInterval(function() // { $(function () { var SearchTerm = '<?php echo $_POST['Search']; ...

javascriptjqueryhtmlajax

Is requesting transclusion in an Angular directive necessary?

An issue has cropped up below and I'm struggling to figure out the reason behind it. Any suggestions? html, <button ng-click="loadForm()">Load Directive Form</button> <div data-my-form></div> angular, app.directive(&apos ...

javascriptphphtmlangularjsangular-directive

Engaging Floor Layout

Currently, I am in the process of developing an interactive floorplan for an office project. The main objective is to provide a user-friendly interface where individuals can search for a specific employee and have their respective office location highlight ...

javascriptjqueryhtmlsvg

The positioning of Material UI InputAdornment icons is located beyond the boundaries of the TextField input area

I am struggling to understand why my InputAdornment is not positioned correctly. There doesn't seem to be any style in my code that would affect the location of the icon within the TextField (such as padding or flex properties). Currently, the calen ...

cssreactjstypescriptmaterial-uitextfield

`JQuery fadeOut seems to have a limitation where it only applies to the

I have a group of divs, each containing an anchor tag that triggers a JavaScript function (which uses AJAX to delete a row from a table). Here's an example setup: <div id="container"> <div><a id="btn" onclick="deleteRow()">Delet ...

javascriptjqueryhtmlcssajax

Generate dynamic maps that are exportable to HTML format

I've utilized Leaflet to produce engaging interactive maps in R. However, I'm encountering an issue when trying to export the maps - the background map appears grey after exporting. library(leaflet) library(htmlwidgets) m <- leaflet(data.fra ...

htmlrmapsexportleaflet

When displaying text pulled from MYSQL in a div, white space is eliminated

I'm attempting to display a string that contains both spaces and line breaks. When I output the string as a value in an input field, the spaces are displayed correctly. <textarea rows={15} value={content} /> However, when I try to display ...

javascripthtmlreactjs

Personalizing the arrow positioning of the Angular8 date picker (both top and bottom arrow)

I am interested in enhancing the design of the Angular 8 date picker by adding top and bottom arrows instead of the default left and right arrows. Can someone guide me on how to customize it? Check out the Angular 8 date picker here ...

javascripthtmlcssangular

Tips for preventing menu flickering caused by overflow during CSS animations

I recently created a vertical menu with an interesting underline effect that appears when hovering over the menu items. Even though the snippet initially failed to execute, I discovered this cool hover effect (taken from here) which I wanted to implement: ...

htmlcss

Having trouble rendering Next.JS dynamic pages using router.push()? Find out how to fix routing issues in your

The issue I am facing revolves around the visibility of the navbar component when using route.push(). It appears that the navbar is not showing up on the page, while the rest of the content including the footer is displayed. My goal is to navigate to a dy ...

htmltypescriptnext.jsroutes

Input field for postal code containing only numbers (maximum 5 digits) in Angular version 4/5

I am struggling with creating an input field that accepts numbers. If I use type="text", I can only type 5 characters of alphanumeric data, but if I use type="number", it allows any number input without limiting it to just 5 numbers. Thank you in advance f ...

javascripthtmlangular

Locate the final flexbox in the initial row and the initial flexbox in the concluding row

How can I identify the last element of the first row and the first element of the last row in the given code to make it round from all corners? It should be noted that the column number will vary as well as the last element of the first row and first eleme ...

jqueryhtmlcssflexbox

Guide on Updating the ColModel Dynamically in JAVASCRIPT/HTML using clearGridData, setGridParam, and reloadGrid Functions

I am trying to figure out how to dynamically change the colmodel of my grid using a function that is called by a SELECT. The reason for this is because my grid has different periods and needs to display either cost or tons based on user selection. Below i ...

javascripthtmljsonjqgridreload

What is the best way to position a bigger character directly above a smaller container?

My goal is to center a single character, using CSS, in a span that is smaller than the character itself. The setup I have is: <span id="A">X</span><span id="B">Y</span><span id="C">Z</span> All three spans are styled ...

htmlcsscentering

Is there a way to prevent the letters from moving when I hover over them?

What occurs when the numbers are hovered over: https://gyazo.com/20b6426d435551c5ee238241d3f96b4d Whenever I hover over the pagination numbers, they shift to the right, and I am unsure of what mistake I made in my code that's causing this. Below, I ...

javascripthtmljquerycss

Developing a trivia game using HTML and JavaScript

I'm in need of some serious assistance with creating a quiz using HTML. My goal is to have a web page where users can visit, take a quiz, and have their responses stored. Unfortunately, I don't have the knowledge or skills required to do this on ...

javascriptjqueryhtml

Steering your pop up to the top with CSS

Seeking advice on how to position my pop-up at the top of the page and resize it to better fit the screen. Here is where you can find my landing page: yogavoga.com/2weekdiet Grateful for any assistance provided. .modal-content { margin: 5px auto; bac ...

htmlcsspopup

One way to position a sidebar between two divs is to ensure it adjusts seamlessly to the size of the browser window when resized

In my layout, I have two grids: one for the header and one for the footer. In between these two grids, I am using a sidebar on the left side. Below is the JavaScript code I am using: function adjustSize() { var heights = window.innerHeight; docum ...

javascripthtmlcss