CODEWITHSUNDEEP
htmlcss
IamM4G1C
IamM4G1C

Reputation: 13

How to make the text smaller when minimising the browser CSS

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!

Upvotes: 1

Views: 2892

Answers (4)

Paulie_D
Paulie_D

Reputation: 114990

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); });

Upvotes: 0

Tauseef Ahmed
Tauseef Ahmed

Reputation: 21

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

Upvotes: 1

user3237322
user3237322

Reputation: 21

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>

Upvotes: 0

petebolduc
petebolduc

Reputation: 1263

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;}
    }

Upvotes: 0

Related Questions