how to make my font size responsive?
20,293
Check this code.
#welcome{
font-size:10vw;
}
#to{
font-size:6vw;
}
#mp{
font-size:12vw;
}
<div id="page-wrap">
<h1 id="welcome">Welcome!</h1>
<h2 id="to">to</h2>
<h1 id="mp">My Portfolio!</h1>
</div>
We can make font size responsive by giving responsive unit to font. px unit is not responsive, whereas percent (%), vh/vw, em, rem units are responsive.
In given example link (css tricks) they've used viewport unit to make font responsive. viewport unit is nothing but vh,vw. vh is: viewport height and vw is viewport width.
If you give vw unit to font, it'll change/ get responsive according to your screen width.
Comments
-
Maduro about 4 years
I'm trying to make some big title responsive. I tried a few things such as: this Link. But it didn't work.
CSS
body { margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigationchanges. */ } #page-wrap { width: 760px; margin: 0 auto; } .title { font-family: Brush Script MT,cursive; font-size: 10vw; font-style: normal; font-variant: normal; font-weight: 500; } #welcome { @extend .title; } #to { @extend .title; text-align: center; font-size: 50px; } #mp{ @extend .title; text-align: right; } .full { background-image: url('../img/beach-bg1920-1080.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } /*******navbar elements *********/ .navbar-inner { background:transparent; border: solid#ffffff 2px; } .nav > li > a:focus, .nav > li > a:hover { text-decoration: none; background-color: $hover-color; } .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; color: white; } .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: -15px; color: #ffffff; } .navbar-brand:focus, .navbar-brand:hover { text-decoration: none; } /*******navbar elements End *********/
HTML
<div id="page-wrap"> <h1 id="welcome">Welcome!</h1> <h2 id="to">to</h2> <h1 id="mp">My Portfolio!</h1> </div>
You can't see the word "My portfolio". i am trying to move everything to the left. in other words, I just want to make sure that this is going to look alright on mobile devices.