My input is getting larger and smaller when I resize the browser. How can I keep the font size consistent without using JavaScript? The font size should always be 100% of the input height.
Check out this example on JSFiddle.
<div class="container">
<div class="inner">
<input class="input"/>
</div>
</div>
Here's the CSS:
.container {
width: 100%;
}
.inner {
position: relative;
}
.input
{
position: absolute;
padding-bottom: 10%;
width: 100%;
}
If you want your font size to adjust based on the viewport width and height, use vw for viewport width and vh for viewport height.
For example:
p {
font-size: 4vw;
}
This will make the font size change as the width of the viewport changes. The same concept applies for using vh instead of vw.
For more information on viewport-relative lengths, check out this link.
It's always a good idea to include a fallback option just in case, like this:
p {
font-size: 14px;
font-size: 4vw;
}
To resize the text, you can utilize viewport units.
The available values include: ‘vw’ (viewport width), ‘vh’ (viewport height), ‘vmin’ (the smaller of vw or vh), and ‘vmax’ (the larger of vw or vh).
For instance:
input {
font-size: 1vw;
}
Keep in mind that full support for viewport units may not be available yet: http://caniuse.com/#feat=viewport-units
As an alternative, consider using media queries as fallback:
@media screen and (max-device-width : 320px)
{
input {
font:<size>px;
}
}
@media screen and (max-device-width : 1204px)
{
input {
font:<size>px;
}
}
You could also explore a JS Plugin like:
Currently tackling a responsive website design. When the screen is resized to mobile view, I must reorganize some div elements. Currently, here's how I'm handling it: $(window).resize(function() { var width = $(window).width(); if( width < ...
Welcome to my website. My goal: Show an image when a user hovers over the links. I must be making some silly error, but I can't pinpoint it. This is what I've attempted so far: HTML <ul class="nm"> <li><a href="#">Cork& ...
Is there a way to create a list of Material UI components with images that have uniform height, even if the original images vary in size? I want to make all image heights responsive and consistent across all cards. Any suggestions on how to achieve this? ...
I've taken over management of my company's website, which was initially created by someone else at a cost of $24,000. We recently made some edits to the slideshow feature on the site, adding buttons that allow users to navigate to corresponding p ...
Struggling to create an expanding navigation bar using CSS. Managed to implement it, but ran into issues when it kept resetting after navigating to a new page. Resorted to using jQuery to resolve the problem by utilizing mouse enter and mouse leave events. ...
I have encountered an issue with a set of values and checkboxes that are pre-checked on this webpage. Everything seems to be working smoothly in all browsers except for Safari. Whenever I try to click on any of the checkboxes, they seem to 'jump' ...
Will the number of CSS files on my website impact its performance? I understand the necessity of having a separate file for print styles, but I'm wondering about the other CSS files. Is it better to have all my styles in one file or split them into mu ...
I recently developed a snippet of code that adds a method to a primitive data type. The objective was to add 10 to a specified number. Initially, I had my doubts about its success and wrote this+10. Surprisingly, the output was 15, which turned out to be ...
I am looking for a way to attach text to an image so that it moves and flips along with the image. How can I achieve this effect? I want the text to behave as if it is part of the image animation. For example, if the image flips, the text should also flip ...
I have a card-deck setup that looks like this https://i.sstatic.net/vuzlX.png I am trying to arrange these boxes in such a way that the total width of the box equals the sum of the Amazon Cost width and the BOXI+ width: https://i.sstatic.net/3uNbe.png He ...
Within my website, I have a particular template page that is styled using various stylesheets. One of these stylesheets is named style.css. Interestingly, on one specific page (page1) that utilizes this stylesheet, the styling appears correctly. However, w ...
I am working with PHP and trying to execute a SQL query when a button is pressed. However, the issue I'm facing is that nothing happens when I click the button! I checked the developer console but there doesn't seem to be any action detected when ...
Is there a way to deactivate one onclick event once the other has been activated? Both divs are initially hidden in the CSS. I'm new to programming, so any help is appreciated. Markup <a id="leftbutton" href="#" onclick="showDiv(this.id); return ...
I am currently trying to implement a JSFiddle example, which allows users to click on a <td> element, make edits, and then save those changes. The example utilizes ng-repeat, but I am not using it. Instead, I am passing data from a resolve command i ...
I am working on a screen that can display up to 1000 data retrieved from the API. Here is the image: https://i.sstatic.net/ErbDD.png Now, I have implemented a drop-down box where users can select alphabetically from A to Z. After selecting an alphabetic ...
After creating a custom template in my WordPress child theme, I added a link to the Bootstrap v3.0.3 .js file stored on my site. While the popup modal is functioning properly, the jQuery tabs seem to be having some issues. Although they are being display ...
Can the title of a touch icon on the homescreen of an iOS device be customized? https://i.sstatic.net/9YL0t.jpg While it's currently acceptable, I am interested in creating a custom title instead of using a default one. ...
Is there a CSS-based solution to create an overlay that remains visible even when the page is scrolled down? I want to use this overlay behind a popup. Using JavaScript to set the height of the overlay based on the page's content is one option, but I& ...
Within my parent container, I am using flex-box to organize the layout. One of the child divs (.child-two) needs to stick out 60px from the top once it reaches the header. Unfortunately, setting position: sticky doesn't work when the parent containe ...
When using materializecss to create a slider, I encountered an issue where the image is full width but not full height, causing scrollbars to appear. What changes can I make to ensure the slider fills out my screen without any scrollbars? Additionally, I ...