When the size of a webpage changes, leveraging the vmin/vmax attribute in CSS

Just started using the brand new vmin css property for adjusting font size - and it's working like a charm!

div.sample { font-size: 1.5vmin; text-align: center; ... }

However, a bit of a snag appears when resizing the page. When the page is made smaller, the font-size remains the same, causing a misalignment.

Firstly, is this something the browser should be handling?

Secondly, what would be the optimal way to address this issue? It seems like setting a trigger to adjust the font-size might be the way to go, but that would require knowing the font-size values in both javascript and css - potentially setting up for failure.

htmlcssresizeviewport-units

Answer №1

Seems like the vmin unit is not behaving correctly in Firefox.

Check out this jsfiddle I created for testing purposes: http://jsfiddle.net/noahcollins/Sc8gm/

Are you experiencing the issue in Chrome? As pointed out by Bazzz, there is a open bug in Chrome. I managed to replicate it in Canary. The CSS Tricks article offers a solution using JavaScript if you're interested.

Additionally, it's worth noting that support for vmin in mobile browsers is currently very limited. This may pose an issue for users switching between portrait and landscape orientations.

Answer №2

Reportedly, this issue has been identified as a known bug by CSS-Tricks. They have provided a JavaScript workaround that you can check out under the heading "Bugs!":

http://css-tricks.com/viewport-sized-typography/

Workaround Recommendation from CSS-Tricks

In order to resolve this issue (enabling resizing without refreshing the page), you must initiate a "repaint" on the element. I utilized jQuery to adjust the z-index value of each element (which may be irrelevant in this context), triggering the repaint.

causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
    causeRepaintsOn.css("z-index", 1);
});

Answer №3

While vmin may seem like a great concept for mobile web design, its limited browser support can lead to some unexpected behaviors. One common issue is that when the font size is calculated based on the size of the screen, text input elements can become too small when the keyboard is open. This can be frustrating for users. Instead, I suggest using vw to ensure that text size remains consistent based on the width of the screen. This can ultimately provide a smoother user experience. Similarly, vh presents the same challenges as vmin in this regard.

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

Turn off the ability to drag on an HTML page

Need help with creating an HTML etch-a-sketch! I have a div container with multiple div elements inside it, all set up with CSS grid display. HTML structure: <div id="canvas"></div> To populate the canvas with div elements, I'v ...

javascripthtmlcss

How to Use Vue.js to Find the Nearest Div Element with a Specific

Below is the HTML code I am working with: <div id="app"> <div class="image"> <div class="overlay"> <p>Some overlay text</p> </div> <img src="https://placeimg.com/640/480/any" class="img-fluid"> ...

javascripthtmlcssvue.js

Guide on setting an empty text box to be zero

Right below, you'll find a textbox that has been generated using this code snippet: $('#txtWeight').each( function() { var $this = $(this); var $weightText = $("<input type='text' class='txtWeightRow' maxle ...

jqueryhtml

Minimize the entire project by compressing the .css, .js, and .html files

After recently incorporating Grunt into my workflow, I was thrilled with how it streamlined the process of minifying/concatenating .css files and minifying/uglify/concatenating .js files. With Grunt watch and express, I was able to automate compiling and ...

javascripthtmlcssobfuscation

PHP script is not successfully receiving the Ajax post request that is

As a newcomer to the world of php and ajax, I am facing a challenge in passing a variable from jquery to a php page loaded within a modal window. My php script fetches table information for multiple users. Next to each user's name, there is an edit b ...

javascriptphpjqueryhtmlajax

Customizing CSS based on URL or parent-child relationship in WordPress

I'm having trouble finding a solution for what seems like a simple issue... Currently, my header has a border-bottom and I'd like to change the color of this border based on the section the user is in. For example, consider these parent pages: ...

javascriptjquerycsswordpress

Implementing a hybrid design using the display flex property

Any suggestions on the most effective way to achieve the following layout using flexbox? I want 2 rows with columns of equal width, but the last column should be 100% height and fill the remaining space in the section. Should I consider using multiple row ...

htmlcssflexboxcss-grid

Ajax is updating the information stored in the Data variable

Recently, I reached out to tech support for help with an issue related to Ajax not executing properly due to Access-Control-Allow-Origin problems. Fortunately, the technician was able to resolve the issue by adding a file named .htaccess with the code Head ...

javascriptjqueryhtmlajax.htaccess

What is the best way to position the logo on the left side and the navigation on the right

How can I position my logo to the left of the navigation bar? This is my current HTML code: <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/png" href="SENCOR_Logo.ico"> & ...

htmlcss

Exploring ways to customize the styles of MUI Accordion components in a Next.js project using CSS modules

I'm trying to customize the default MUI CSS for the accordion component using a CSS module. The issue I'm facing is that the class is dynamically added by MUI, making it impossible to target directly. Here's the solution I attempted, but it ...

csssassnext.jsmaterial-uicss-selectors

row-1 css classes on the top in a project built with Blazor

I'm currently working on customizing the standard layout provided in Blazor projects like WASM or server, but I'm a bit perplexed by the top-row px-4 css classes. Within the HTML code that appears to define the top row/header section is this sni ...

csstwitter-bootstrapblazorbootstrap-5

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

View reference image ->Take a look at the reference image provided. ->In the image, a for loop is used to create box designs and displayed above. ->The goal is to change the background color and border color of all boxes using a single HTML cla ...

javascripthtmlcssangular

I am looking to build an array that can store five numbers inputted by the user. Following that, I want to utilize a for loop to display the contents of the array. How can I accomplish this task?

Looking for help to store 5 unknown numbers in an array and then display them after the user has entered all 5 numbers. Can anyone assist me in creating an array of size 5 and using a for loop to show the numbers? Here is the code I currently have: ...

javascripthtmlarrays

What is the best way to reverse the order of echo statements in PHP, so that they

A project I was working on involved creating a blog using PHP. Here is the code I used to submit posts into the database: <form method="POST" action="makePost.php"> <input autocomplete="off" type="text" name="title"> <textarea name= ...

phphtml

Delete an entry from the localStorage

I am attempting to create a basic To-Do list using jQuery, but I have encountered an issue. This is my first time utilizing localStorage. After setting up the structure for my To-Do list, I wanted the items to remain visible when I refresh the page. Initia ...

javascriptjqueryhtmllocal-storage

Using Selenium WebDriver to locate elements by their XPath within a WebElement

I am facing an issue with locating an element in my code using the following snippet: elements = driver.find_elements_by_xpath("//div[@class='Display']") After successfully finding the elements, I want to access the second "Display" element and ...

pythonhtmlfindselenium-webdriver

Can you explain the meaning of 1__qem?

While looking at the default styles applied to HTML elements for Google Chrome, I came across this information on this page: p { display: block; -webkit-margin-before: 1__qem; -webkit-margin-after: 1__qem; -webkit-margin-start: 0; -web ...

cssgoogle-chromewebkit

Expanding the background color of a Div within a Grid System

Note: Utilizing the skeleton grid system. I'm trying to expand the background color of a specific div beyond the 960px container, but I'm facing some difficulties. Any ideas? Current: Desired outcome: HTML: <!DOCTYPE html> <!--[if l ...

csshtmlgridskeleton-css-boilerplate

I am experiencing issues with the functionality of the Search Button in my code

I am experiencing an issue with the Search Button in my Search Form. I created the Search form using only html and pure CSS to test whether JS is necessary for a Search form with Drop Down Filter! Do I need to incorporate some JS code or is it feasible to ...

htmlcss

When selecting a new tab in HTML, the current page position remains unchanged. However, I would like the page to automatically scroll to the

In the design of my website, I have incorporated buttons that are linked to various pages using navigation tabs. However, when these buttons are clicked, the view maintains its position on the new page (e.g., halfway scrolled through the page). Instead o ...

htmlcss