0

I am trying to change <h1> and <p> text's width and height dynamically. I want to get parents height and width, then use percentage for changing child's. But all my attempts are failed.

Here is my css example code: 

#main-holder #category1 {
    height: 80px;
    width: 15%;
    float: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    border: thin solid #999;
    margin-top: 5%;
    margin-right: 2%;
    margin-bottom: 0px;
    margin-left: 6%;
    text-align: center;
    vertical-align: top;
}
#main-holder #category1 h1 {
    font-weight: bold;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    line-height: 20%;
    text-decoration: none;

}
#main-holder #category1 h1 a {
    color: #FFF;
    text-decoration: none;
}
#main-holder #category1 h1 a:hover {
    color: #999;
    text-decoration: none;
}
#main-holder #category1 p {
    color: #CCC;
}

in html I am using like this: 

 <div id="category1">
        <h1><a href="category1.html">MOVIES</a></h1>
        <p>FOR ALL AGES</p>
      </div>

I added width and height like below, but it didn't help: 

#main-holder #category1 h1 {
        height: 50%;
        width: 50%;    
    }
Roy Sonasish
  • 4,571
  • 20
  • 31
goGud
  • 4,163
  • 11
  • 39
  • 63
  • You can't make text-size responsive without javascript unless you are happy to make it adapt to the browser width...would that do. – Paulie_D Apr 16 '15 at 12:56

4 Answers4

3

In your code, you dont have #mainholder, but used all the css with that.so none of the styles applied. So I removed that from css and used line-height as 100% along with height. As the parent div have height as 80px, hope this is working fine and this is what you expected.

Updated Demo

Added font-size:2.9vw; for h1

#category1 {
    height: 80px;
    width: 15%;
    float: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    border: thin solid #999;
    margin-top: 5%;
    margin-right: 2%;
    margin-bottom: 0px;
    margin-left: 6%;
    text-align: center;
    vertical-align: top;
    background-color:#666;
}
 #category1 h1 {
    font-weight: bold;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    line-height: 100%;
    height: 100%;
    text-decoration: none;
    font-size:2.9vw;

}
 #category1 h1 a {
    color: #FFF;
    text-decoration: none;
}
 #category1 h1 a:hover {
    color: #999;
    text-decoration: none;
}
 #category1 p {
    color: #CCC;
}

You can use viewport value instead of ems, pxs or pts.

1vw = 1% of viewport width

1vh = 1% of viewport height

Update: Demo

For <p> Height alignment problem, Use background and border for <h1> along with height and line-height like this:

CSS:

#category1 {
    height: 80px;
    width: 15%;
    float: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;   
    margin-top: 5%;
    margin-right: 2%;
    margin-bottom: 0px;
    margin-left: 6%;
    text-align: center;
    vertical-align: top;


}
#category1 h1 {
    font-weight: bold;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    line-height: 80px;
    height: auto;
    text-decoration: none;
    font-size:2.9vw;
     background-color:#666;
     border: thin solid #999;
}
G.L.P
  • 7,119
  • 5
  • 25
  • 41
  • What I mean is, in your demo application there is a slider(left of box), when you shrink with slider. You will see that the BOX (category) going smaller, however width and height of text font size is not decreasing. – goGud Apr 16 '15 at 12:53
  • Was just posting an answer with vw/vh! @goGud if you want to read more about viewport sizing read this: https://css-tricks.com/viewport-sized-typography/ – NateW Apr 16 '15 at 13:02
  • @K.B.M can I define max height and width ? – goGud Apr 16 '15 at 13:03
  • yes you can, but may I know is there any specific purpose for that – G.L.P Apr 16 '15 at 13:04
  • For example, if user use full screen or really large resolution, then

    tag going bottom of bordered box.

     – goGud Apr 16 '15 at 13:10
3

Why dont you use vw for font-size ?

font-size: 5vw;

Documentation

Petru Lebada
  • 2,167
  • 8
  • 38
  • 59
0

To change the text size you should use font-size:72px; or font-size:3em;.

Sagar Khatri
  • 1,004
  • 8
  • 23
0

One of the options it to use CSSStyleSheet JS object.

Check this tutorial: http://davidwalsh.name/add-rules-stylesheets

This answer provides another approach: modify a css rule object with javascript

You can get stylesheet object and manually modify properties:

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.height = '80px';
Community
  • 1
  • 1
suvroc
  • 3,058
  • 1
  • 15
  • 29