How to avoid element from expanding when its content text font-size gets bigger?
Yoy can use float: left
and box-sizing: border-box
to align the nav items. Also, use padding : 0
so that when you make the text big, it is centered. Here is an example:
* { margin: 0; padding: 0; box-sizing: border-box;}
body { background: royalblue; font-family: monospace; }
header { position: relative; margin: 0 auto; height: 38px; width: 100%; background: red;}.parent-ul { position: relative; list-style: none; text-align: center;}
.parent-ul li { height: 38px; width: 20%; float: left; transition: background 1s, border 1s, border-radius 1s;}
.parent-ul li:not(:first-child) { border-left: 1px solid silver;}
.parent-ul a { text-decoration: none; color: white; padding: 0; font-size: 14px; transition: color 1s, font-size .5s; line-height: 38px;}
/* Effects ================================ */
li:hover { background: black; border: 0; border-radius: 2px; cursor: pointer;}
li:hover a { color: gold; font-size: 18px;}
<body> <header> <ul class="parent-ul"> <li><a href="homepage.html">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Services</a></li> <li><a href="index.html">Products</a></li> </ul> </header></body>
How to prevent html div from expanding when text size is changed
To fix the horizontal pushing:
Instead of using padding
to space the items apart, one solution is to use width
and text-align: center;
so that the items don't push the other items after them.
To fix the vertical pushing:
One solution is to specify a line-height
equal to the largest font-size
(which would be your :hover
size)
#navigation{ background-color:black; width:98%; font-family:calibri; padding:1%; margin-left:0px; position:absolute; top:0; left:0; display:block;}#nav{ list-style-type:none;}ul#nav li{ float:left; width: 15%; text-align: center;}.navlink{ display:block; background-color:black; text-decoration:none; color:white; line-height:14pt;}.navlink:hover{ font-weight:bold; font-size:14pt; }
<!DOCTYPE html><html><body> <div id = "navigation"> <ul id = "nav"> <li><a href = "mechadogs.org/home" class = "navlink">Home</a></li> <li><a href = "mechadogs.org/team" class = "navlink">Our Team</a></li> <li><a href = "mechadogs.org/gallery" class = "navlink">Gallery</a></li> <li><a href = "mechadogs.org/community" class = "navlink">Community</a></li> <li><a href = "mechadogs.org/first" class = "navlink">FIRST</a></li> </ul> </div></body></html>
Font scaling based on width of container
If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.
If the container is the body, what you are looking for is Viewport-percentage lengths:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.
The values are:
vw
(% of the viewport width)vh
(% of the viewport height)vi
(1% of the viewport size in the direction of the root element's inline axis)vb
(1% of the viewport size in the direction of the root element's block axis)vmin
(the smaller ofvw
orvh
)vmax
(the larger orvw
orvh
)
1 v* is equal to 1% of the initial containing block.
Using it looks like this:
p {
font-size: 4vw;
}
As you can see, when the viewport width increases, so do the font-size
, without needing to use media queries.
These values are a sizing unit, just like px
or em
, so they can be used to size other elements as well, such as width, margin, or padding.
Browser support is pretty good, but you'll likely need a fallback, such as:
p {
font-size: 16px;
font-size: 4vw;
}
Check out the support statistics: http://caniuse.com/#feat=viewport-units.
Also, check out CSS-Tricks for a broader look: Viewport Sized Typography
Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography
And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu
Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS
Font-size that expands when you resize the window
Do it in jquery.
$(window).resize(function(){
$('#box #text').css('font-size',($(window).width()*0.5)+'px');
});
Increasing font size without moving other text
Is this what you're looking for?
.nav { margin-top: 0px; height: 40px; width: 600px; background: white;}
.nav ul { display: block; margin: 0; padding: 0; position: relative;}
.nav ul li { list-style-type: none; display: inline-block; width: 20%; padding: 0; margin: 0; float: left; text-align: center;}
.nav ul li a { text-decoration: none; display: block; width: 100%; height: 100%; line-height: 40px; color: black; font-family: ProximaNova; font-size: 18px; transition: color .3s cubic-bezier(0.55, 0, 0.55, 0.2) , font-size .3s cubic-bezier(0.55, 0, 0.55, 0.2) ;}
.nav ul li a:hover { color: #D46300; font-size: 22px;}
<center> <div class="nav"> <ul> <li><a href="news.html">News</a></li> <li><a href="servers.html">Servers</a></li> <li><a href="donate.html">Donate</a></li> <li><a href="bans.html">Bans</a></li> <li><a href="support.html">Support</a></li> </ul> </div></center>
Font-size not getting bigger in CSS
How to approach issues of type "My styles are not applied"
First, you should use the dev tools in your browser to investigate the element in your DOM.
As you can see, your font-size
value is overwritten by Bootstrap's styles (coming from that _rfs.scss
file mentioned at the right).
Option A: Display Headings (Bootstrap, only in your case)
Use Bootstrap's Display Headings. This lets you define different font sizes on your headings.
In your case, you could try this one:
<h1 class="display-1">Hello World.</h1>
Option B: Class Specificity
Add a class by yourself and refer to this class in your CSS.
h1.my-heading {
font-family: 'Montserrat';
font-size: 15rem;
}
<head>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="row">
<div class="col-lg-6">
<h1 class="my-heading">Hello World.</h1>
</div>
<div class="col-lg-6">
</div>
</div>
Related Topics
Css 'Pointer-Events' Property Alternative For Ie
How to Disable a Link Using Only Css
How to Add Some Non-Standard Font to a Website
How to Dynamically Add HTML Element/Content - Angular
How to Avoid Decimal Values in Input Type Number
Mobile Redirect Using Htaccess
Is a Url Allowed to Contain a Space
Changing the Symbols Shown in a HTML Password Field
Directory Chooser in HTML Page
How to Run a HTML File from Terminal
Browsers' Default CSS For HTML Elements
Canvas Width and Height in Html5
Are the Decimal Places in a CSS Width Respected
How to Prevent Autoplay in Iframe HTML Content
How to Force Div Contents to Stay in One Line With HTML and CSS
How to Save User-Entered Line Breaks from a Textarea to a Database