CODEWITHSUNDEEP
htmlcssfontsresize
user1735907
user1735907

Reputation: 1

I'm not able to resize the text

I'm having a problem with resizing text. I uploaded picture for illustrative purposes. enter image description here The problem is. The big box is the parent div in which there is a smaller div (smaller box) that contains an image. The rest of the bigger div should be filled with text (red/pink lines). Text is formatted in paragraphs (<p> .... </p> <p> .... </p>) and there are some links within text.

Sizes of divs are dynamic, they change when window size changes. So I want the font size to change to fit the main div. Is there any solution? I would really appreciate it.

This is my html code 

<div id="taust" align="justify">

<img src="images/1.png" width="30%" height="auto" alt="1" id="top_foto">
<img src="images/A.png" width="auto" height="15%">

<p> text </p>
<p> text </p>
<p> text </p>
<p>text <a href="link" target="_blank">Link</a>!</p>

</div>

This is my css code

@charset "utf-8";
/* CSS Document */

html, body, div, a, p {
}
html { 
    background: url(background/bg_image2_sx.jpg) no-repeat; 
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-size: cover;
    position: relative;
    min-width: 911px;
    min-height: 500px;
    font-size: 100%;
}

body {
    font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}

#taust {  
    background-image:url(images/taust.png);
    width: 88%;
    height: 87%;
    position: absolute;
    top: 5%;
    left: 5%;
    min-height:435px;
    min-width:802px;
    border: 1px solid #CCC;
    padding: 1%;
}

@font-face { font-family: riesling; src: url('font/riesling.TTF');
}

a {
    color: #CCC;
    text-decoration: underline;
    font-size:0.95em;
    line-height: 1.4em;
    font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}

p {
    line-height: 1.4em;
    font-size: 0.95em;
    color:#CCC;
    margin: 0 0 6px 0;
    font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}

#top_foto {
    float: left;
    margin: 0 1.2% 1.2% 0;
    border: solid 1px #CCC;
}

Upvotes: 0

Views: 1069

Answers (3)

Arel
Arel

Reputation: 3938

Your div isn't expanding to cover all your text because your position is set to absolute in your css. I edited the CSS below. 

#taust {  /* Avalehe taustaks must kast */
    background-color: #CCC;
    width: 88%;
    height: 87%;
    position: relative;
    top: 5%;
    left: 5%;
    border: 1px solid #000000;
    padding: 1%;
}​

If you want the DIV to be a specific size, but you want the font to be restricted within it, your entire site should use relative units, like percentages. Otherwise, I think you would end up using trial and error trying to figure out what size text doesn't flow outside your div at any given screen size.

Upvotes: 3

Arel
Arel

Reputation: 3938

This answer from a similar question seems to answer your question:

I've had to do this myself. What I did was that I set a base text size for the body, and percentages for all other sizes. I then used a simple jQuery script to change the base size on window resize. The other sizes then update as well. I used something like this:

$(function() {
     $(window).bind('resize', function() {
         resizeMe();
     }).trigger('resize');
});

and in the resizeMe-function, I had this:

//Standard height, for which the body font size is correct var
preferredHeight = 768;  

var displayHeight = $(window).height(); 
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) > - 1;
$("body").css("font-size", newFontSize);

see: auto resize text (font size) when resizing window?

EDIT:

To add jQuery to your code, you do the following:

You have to reference the jQuery library. Usually you do it just before your closing </body> tag in your index.html page. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

This is the one hosted by google, which is the fastest and smallest. You can also download the library and put in your js folder and reference it the same as above, but with the relative link to your file.

You can then paste the jQuery code below the above script and above the closing </body> tag and it should work. You can also put the code in a separate file, and link to it at the bottom of the body section of your index.html page.

Upvotes: 1

Xarcell
Xarcell

Reputation: 2011

Use Media Queries for re-sizing dynamically, or use VH, VW(relative units), but is currently supported by Chrome and IE9/10.

Upvotes: 0

Related Questions