how to make my font size responsive?

Question

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.

Possible duplicate of [Responsive Font Size](http://stackoverflow.com/questions/15649244/responsive-font-size) — Kyle, Mar 25 '16 at 04:33
I tried those answers but didn't work, i got my link from that page, too. @KyleMessner — Maduro, Mar 25 '16 at 04:35
So, the title is big so big that cover the front page. So, if I minimize the window the text doesn't change the side — Maduro, Mar 25 '16 at 04:41
Right but do you want it to change size precisely as in the `font-size: #vw;` example or do you want it to jump to a pre-determined size as in the media queries example? — Kyle, Mar 25 '16 at 04:46
change size. I just want to make sure that it will look nice in mobile devices. But, anything will be useful... — Maduro, Mar 25 '16 at 04:49
Have you linked 100% of your CSS/HTML? With just what you've given I've been able to get `vw` to work. — Kyle, Mar 25 '16 at 04:54
yeap that is all my code, i just started to create my portfolio 2 days ago. So, there is no too much code — Maduro, Mar 25 '16 at 04:56
Please, share your solution so I can compare it with my code and see what I was doing wrong. — Maduro, Mar 25 '16 at 04:57

score 10 · Accepted Answer · answered Mar 25 '16 at 05:04

10

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.

answered Mar 25 '16 at 05:04

Vinaya

363
1
8

yes, it works. But, there is a problem. Not sure if you saw that I am using: `text-align: center and right` so when I change the size of the window everything get out of place. Is there a way to also make everything look nice if the window is small; like a mobile size or something – Maduro Mar 25 '16 at 05:09
Do you want "Welcome to my portfolio" sentence in one line? – Vinaya Mar 25 '16 at 05:16
Nop, just make sure that if you move everything to the left, so everything goes to the left. right now if you try to minimize the window from right to left for some reason "My portfolio" word get hided by the window. And, yes letter get smaller, but they don't show up on the page, they hide! – Maduro Mar 25 '16 at 05:19
I just attached a picture. =) – Maduro Mar 25 '16 at 05:23
Have you written any other css? Any reset css etc.? – Vinaya Mar 25 '16 at 05:24
I just posted my css (all lines) – Maduro Mar 25 '16 at 05:27
http://codepen.io/vinayasonawane/pen/xVrKrZ Check this pen. I've used same css and html code. It's working well even if I reduced browser width to check responsiveness. – Vinaya Mar 25 '16 at 05:28
So if I delete my `#page-wrap` it does work...But I need my site wrap up – Maduro Mar 25 '16 at 05:32
got it..I will use .container from bootstrap – Maduro Mar 25 '16 at 05:36
Check it again. Now I've added wrapper, same like yours. http://codepen.io/vinayasonawane/pen/xVrKrZ – Vinaya Mar 25 '16 at 05:40
Ok.. So if you're using bootstrap, use container or container-fluid. Hope it'll help :) – Vinaya Mar 25 '16 at 05:41

score 0 · Answer 2 · answered Mar 25 '16 at 05:01

Simply changing 150px to 10vw worked for me.

.title, #welcome, #to, #mp {
  font-family: Brush Script MT,cursive;
  font-size: 10vw;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
}

#to {
  text-align: center;
  font-size: 50px;
}

#mp {
  text-align: right;
}

<div id="page-wrap">           
  <h1 id="welcome">Welcome!</h1>
  <h2 id="to">to</h2>
  <h1 id="mp">My Portfolio!</h1>
</div>

score 0 · Answer 3 · edited Mar 27 '16 at 14:55

Use vw instead of pixel for more details https://css-tricks.com/viewport-sized-typography/

.title {
  font-family: Brush Script MT, cursive;
  font-size: 15vw;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
}

#welcome {
  @extend .title;
}

#to {
  @extend .title;
  text-align: center;
  font-size: 13vw;
}

#mp {
  @extend .title;
  text-align: right;
  font-size: 10vw;
}

<div id="page-wrap">
  <h1 id="welcome">Welcome!</h1>
  <h2 id="to">to</h2>
  <h1 id="mp">My Portfolio!</h1>
</div>

how to make my font size responsive?

3 Answers3