Achieving responsive design using text font percentage instead of text images can be done by implementing the following code snippet provided below

When working with text in HTML, I encountered an issue where using percentages for width and height was not giving me the desired results. To work around this, I used images of text instead, but each image ended up either stretched or looking too small.

Here is the code I am currently using:

<img class="LohaD" src="./Styles/img/LohaD.png" />

.LohaD {
    width: 78.2%;
    height: 2.4%;
    object-fit: contain;
    text-align: center;
    display: block;
    vertical-align: central;
    margin-left: auto;
    margin-right: auto;
}

The main drawback of this approach is that I cannot maintain the text size consistently across different devices when using images. I am hopeful for some suggestions on how to achieve responsive text with percentage-based sizing. Thank you.

Answer №1

Utilize Viewport units to create responsive text sizes. For instance:

.responsive-text {
 font-size: 90vh;
}

Explore more about this at

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

overlay the div or image with a translucent color

I have a div containing an image with the results from my database, carefully designed and positioned within each div. However, I would like to highlight certain results by overlaying them with a color. I am seeking a method to achieve this effect withou ...

Troubleshooting HTML/CSS and JavaScript Issues with Dropdown Menus

I'm having trouble getting my dropdown menu to work properly and I can't figure out why. The JavaScript code should toggle a class that hides the language options and slides up the other tabs like "Contact". However, when I click the button, noth ...

Chrome displays radio buttons with a white background that is not intended. Firefox, on the other hand

The radio buttons in Google Chrome are displaying an unwanted white background around the circle, which is not the intended behavior as seen in Firefox. Please refer to these images for comparison. For a direct example of the issue on the page, please vi ...

My jquery filter is not functioning properly

I need help making the active class work on each category when clicked, shifting to the next one. I've tried implementing it but no luck so far. $(document).ready(function() { $('.list-inline-item').click(function() { const value = ...

The div-tag is not displaying the background image as expected

I'm completely stumped. My goal was to create my own gallery, but right from the start, I hit a roadblock: Trying to display an image as a background in a <div>. I've tried everything, searched high and low on the internet, combed through s ...

I am attempting to format an HTML form with proper indentation, but it seems to be eluding me

Struggling to design a custom registration form template, I'm facing an issue where paragraph spaces or indents are not being recognized by the program, even in the preview pane. Seeking assistance with this problem. I am attempting to position this ...

Choosing from a list in Angular

I'm trying to make a dropdown menu that shows options in the format "code-description", but only displays the "code" portion when an option is selected. For example, showing "A-Apple" in the dropdown, but displaying only "A" when chosen. I am able to ...

The information submitted through the form is not displaying on the console after being gathered using the post method in Express

When attempting to add products using a form on the admin page, the data (including an image file) is not being displayed in the console as expected. Instead, the following message appears: "{} POST /admin/add-product - - ms - -" Below is th ...

increase the number of rows in the table automatically

I've encountered an issue while working on a form that involves getting a value from a jQuery spinner and dynamically adding that number of rows to a table inside the form. Despite using firebug to debug, I couldn't pinpoint the exact cause of th ...

Can you explain the distinction between <P> and <p> tags in HTML?

Currently, I am examining HTML documents by parsing them through Java and I have noticed that the p tag is one of the most frequently utilized tags. While I understand that it is used to create a new line, I am puzzled by the fact that in some documents I ...

When HTML elements are dynamically inserted through JavaScript using quilljs, they may cause conflicts with the layout properties

I am currently working on creating a simple webpage layout similar to that of Stack Overflow, with a sidebar and a main content area that can scroll. In my case, the content area is intended to host a QuillJS text editor. To integrate the QuillJS editor i ...

Having trouble with adding data from an array of objects to an HTML element using jQuery's each method

I am currently facing an issue with looping through an array of objects using $.each in jQuery and trying to append the values to an <li>. Here is the relevant jQuery code: $(".sidebar").empty().append("<div>" + "<h5>Student Info</ ...

How can I trigger an Onclick event from an <a tag without text in a Javascript form using Selenium?

Here is my original source code: <a onclick="pd(event);" tabindex="0" issprite="true" data-ctl="Icon" style="overflow: hidden; background: transparent url("webwb/pygridicons_12892877635.png!!.png") no-repeat scroll 0px top; width: 16px; height: 16px ...

The voting system will increase or decrease by 1 to 5 during each round

Recently, I added a voting system to my website inspired by this source. It's functioning well, but there is an issue where each vote can sometimes count for more than one. You can view the source code on the original website and test it out live here ...

How to Delete an Added Image from a Dialog Title in jQuery

I've tried multiple solutions from various sources, but I'm still struggling to remove an image from a dialog. Whenever I attempt to do so, I end up with multiple images instead of just one. It's important to note that I only want the image ...

Struggling to align h2 in div using bootstrap

Hello everyone! Can anyone help me figure out what I'm doing incorrectly? <div class="col-4" style=""> <h2 class="text-center vertical-center">Insert text here</h2> </div> I've attempted ...

An alternative to PHP's exec function in Node.js

I am interested in developing a piece of software using C (such as prime number factorization) and hosting it on my web server with Node.js. Following that, I would like to create an HTML document containing a form and a button. Upon clicking the button, ...

Revealing child elements by expanding the absolute div from the center

I am trying to create a rectangular mask that expands on hover to display its children with varying heights. Currently, I have achieved this using an absolutely positioned div that adjusts its left, width, and max-height properties. However, I would like i ...

The z-index overlapping problem in webkit browsers is a result of Angular 7 animations

I have implemented staggered animations in my Angular 7 application to bring elements to life upon page load. However, I am facing a strange z-index problem with one of my components. Here is the animation code: @Component({ selector: 'track-page& ...

Why is the oninput function in JavaScript not functioning properly?

After following a practical video tutorial step by step, I tried to implement the code provided (in HTML and JS) but nothing seems to be working! The code snippet from the tutorial includes: var $count = document.getElementById("count"), $textarea = ...