1

I have came across a problem, whenever I make my browser smaller the text stays the same and it doesn't go smaller. How do I make the text go smaller when I the browser gets smaller?

Please visit http://jsfiddle.net/xiiJaMiiE/PjbHs/ for my website

.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}

Thanks in advance!

IamM4G1C
  • 13
  • 1
  • 5
  • 1
    You could use `CSS` media-queries, so when it's below/between a certain wide then change the font size - http://css-tricks.com/css-media-queries/ – Nick R Feb 26 '14 at 12:59
  • 1
    What you want is [mediaQueries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries). – pstenstrm Feb 26 '14 at 12:59
  • I have tried that but it doesn't play out to how i want it to – IamM4G1C Feb 26 '14 at 13:00
  • 1
    Can you add the media-queries you have tried, and the corresponding CSS to your post. – Nick R Feb 26 '14 at 13:00
  • Take a look: http://stackoverflow.com/questions/15649244/responsive-font-size – André Figueiredo Feb 26 '14 at 13:00
  • huh - saw that fiddle somewhere else too ? . Mediaqueries are the way to go - but if that is your website then I think "queries" are still to difficult. - no offense. – Mr. iC Feb 26 '14 at 13:39

4 Answers4

1

As mention above you need to use media queries if you want to change your font-size (or any other CSS value based on browser / screen size)

Below is example based on Mobile Screen Size 

// Work For All Other Screens Except the one which we redefine in bottom
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

.home {
font-size:20px;
}

}

You only need to define value which you want to change browser rest all values form above style and only change font-size to 20px on screen size 320px

Keep in mind you need to include libraries like https://github.com/scottjehl/Respond in your page to support older browsers

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Tauseef Ahmed
  • 21
  • 3
0

This css should work for you... simply adjust/delete the query breaks as needed and adjust the font size as well.

.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}

    @media all and (min-width: 1281px){ 
    .home{font-size:25px;}
    }

    @media all and (min-width: 1025px) and (max-width: 1280px) {    
        .home{font-size:22px;}
    }

    @media all and (min-width: 769px) and (max-width: 1024px) { 
        .home{font-size:18px;}
    }

    @media all and (min-width: 481px) and (max-width: 768px) {
        .home{font-size:16px;}
    }

    @media all and (min-width: 321px) and (max-width: 480px) {
        .home{font-size:14px;}
    }

    @media all and (max-width: 320px) {
        .home{font-size:14px;}
    }
petebolduc
  • 1,233
  • 1
  • 13
  • 20
0

It's possible using viewport units but it does require a small amount of JS/JQ due to a minor bug.

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

http://caniuse.com/viewport-units tells browser support

Codepen Demo

CSS

p {
  font-size:1vw;
}

JQ

causeRepaintsOn = $("p"); /* could include any text related tags */
$(window).resize(function() {   causeRepaintsOn.css("z-index", 1); });
Smar
  • 8,109
  • 3
  • 36
  • 48
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

I would highly recommend to not use px for font sizes, as each browser has a different standard font size to begin with. however there is an alternative which can give you the result you want across all browsers, old and new.

css:

 #px {
 font-size:25px;  /*this was the size you want*/
 }

 #percent {
 font-size:160%;   /*this is what it is in % but give you the support for crossbrowser coding*/
 }

incase you want to try it out here is the html to show you the difference

html:

<p id="px">HELLO</p>

<p id="percent">HELLO</p>
user3237322
  • 13
  • 3