Fix Form size HTML

Hi experts, I wish to fix the size of the paragraph (<p>) that, even minimizing the form of the page, it would remain intact its size.
My code shown below is one street sentence when i open the page. When i do minimize its page the sentence will turn double or even triple. Is it possible to fix the size of the paragraph? Hope you get my point. Thanks!

<!DOCTYPE html>
<html>
<body>
<h3>Enroll</h3>
<div>
<p>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet.</p>
</div>
</body>
</html>
Whing Dela CruzAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
Comments inside the code:
HTML:
<h3>Enroll</h3>
<div>
<p id="container">"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet.</p>
</div>

Open in new window


JQuery:

$( window ).resize(function() {
  //First I took the fontSize of p in px
  var logoHeight=$('#container').css('font-size');
  //I took the window innerheight in px.If i divide the window
  // height/logoheight it produce 13.12 almost 13.This is a constant
  //number that I use later as a factor to regulate the fontsize of paragraph
  var windowHeight=window.innerHeight;
  if(windowHeight>210){
    windowHeight=210;
  }
  var factor=13;
  $('#container').css('font-size',(windowHeight/factor));
});

Open in new window


You can calculate your window height and set a new factor constant
0
Tapan PattanaikSenior EngineerCommented:
Hi Whing Dela Cruz,

Fixed-width layout in which text never "reflows" when the browser window is resized.

<!DOCTYPE html>
<html>
<body>

    <h3>Enroll</h3>
    <div style="width: 200px">
        <p>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet.</p>
    </div>
</body>
</html>
0
Whing Dela CruzAuthor Commented:
Hi Leonidas, I tried your code but it doesn't work on me. I attached here the code to let you know if I implementing the code correctly.  I took 1 picture to show you the result while trying to run the code. Thank you!
Reflows.html
A.bmp
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Whing Dela CruzAuthor Commented:
Hi tapan, I'd also tried your code and I've got the same result. It doesn't work on me!
0
Tapan PattanaikSenior EngineerCommented:
Hi Whing,

Have you tried to change the width of the div  !!!
if you do minimize its page the sentence will not turn double or even triple
   <div style="width: 1200px">
0
Leonidas DosasCommented:
Whing I think that I understand now.Change the height to width.In my screen is 710px;So the factor is 45.Check this:
$( window ).resize(function() {
  //First I took the fontSize of p in px
  var logoHeight=$('#container').css('font-size');
  //I took the window innerwidth in px.If i divide the window
  // width/logoheight it produce 45.01 almost 45.This is a constant
  //number that I use later as a factor to regulate the fontsize of paragraph
  var windowWidth=window.innerWidth;
  
  console.log(windowWidth);
  var factor=45;
  $('#container').css('font-size',(windowWidth/factor));
});

Open in new window

0
Whing Dela CruzAuthor Commented:
Hi Leonidas, It's still not working. I've got the same result. My pc screen resolution is 1024 by 768 pixels. By the way where did you get that 45?
0
Whing Dela CruzAuthor Commented:
Hi Tapan, I'd also try to use 1200px but the result is the same.
0
Leonidas DosasCommented:
Whing my apologies I was not clear and I had wrong approach of the problem. SO...Initially I measured the innerWidth of the window in px.Then I measured the font size of <p> element  (in px that).I divide these two and I get a number that I named factor.This factor is going to be a constant so every time that the width of the window reduced then and the font size (necessarily)  must reduced to keep the factor costant.As these the correct code (tested in Liveweave) is this:
var logoHeightInit=$('#container').css('font-size');
var windowWidthInit=window.innerWidth;
var factor=windowWidth/parseInt(logoHeight);
$( window ).resize(function() { 
var logoHeight=$('#container').css('font-size');
var windowWidth=window.innerWidth;  
  $('#container').css('font-size',(windowWidth/factor));
});

Open in new window

0
Whing Dela CruzAuthor Commented:
Hi Experts, I do believed that Leonidas  solution above is correct but when I tred to run it to my server, still not working. I tried to use some script below to test if the code is running, but then I've got no result or no alert upon doing it. I have no idea which part of it getting wrong. Thank you!

<script>
var factor=windowWidth/parseInt(logoHeight);
alert(factor);
</script>
0
Leonidas DosasCommented:
Did you have put the JQuery library into  a script?You can check the factor value like this:
var logoHeightInit=$('#container').css('font-size');
var windowWidthInit=window.innerWidth;
var factor=windowWidth/parseInt(logoHeight);
$( window ).resize(function() { 
var logoHeight=$('#container').css('font-size');
var windowWidth=window.innerWidth;
console.log(factor);  
  $('#container').css('font-size',(windowWidth/factor));
});

Open in new window

0
Whing Dela CruzAuthor Commented:
Let me attached here once again the entire code, still the same result when I tried. I doubt the way I implemented the code. Please have a look. Thank you!
Reflows100.html
0
Leonidas DosasCommented:
You have miss the JQuery library.In the head put the cdn:
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
</head>
<body>
<!-- Start your code here -->

<h3>Enroll</h3>
<div>
<p id="container">"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet.</p>
</div>
  <script>
 var logoHeightInit=$('#container').css('font-size');
var windowWidthInit=window.innerWidth;
var factor=windowWidth/parseInt(logoHeight);
$( window ).resize(function() { 
var logoHeight=$('#container').css('font-size');
var windowWidth=window.innerWidth;
console.log(factor);  
  $('#container').css('font-size',(windowWidth/factor));
});
    
  </script>
<!-- End your code here -->
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Whing Dela CruzAuthor Commented:
Hi Leonidas, Sorry, but I think there's a miss leading the way I ask my question. My problem is that when i minimize the page the line of the paragraph will merge each other leading to not readable to the clients. I pasted here the HTML and CSS for you to see the problem. Thank you!

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5, CSS3 and JavaScript demo</title>
<link rel="stylesheet" href="WinStyle.css"/>
<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
</head>
<body>
<!-- Start your code here -->

<h3>Enroll</h3>
<div id="navHeadb2">
<p id="container">"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet.</p>
</div>
  <script>
 var logoHeightInit=$('#container').css('font-size');
var windowWidthInit=window.innerWidth;
var factor=windowWidth/parseInt(logoHeight);
$( window ).resize(function() {
var logoHeight=$('#container').css('font-size');
var windowWidth=window.innerWidth;
console.log(factor);  
  $('#container').css('font-size',(windowWidth/factor));
});
   
  </script>
<!-- End your code here -->
</body>
</html>

CSS

#navHeadb2
    {
    line-height:0px;
    height:20px;
    width:100%;
    float:left;
    font-size: 16px;
    background-color:yellow;
    margin: 8px 1px 1px 1px;
   }
0
Whing Dela CruzAuthor Commented:
Thank you so much Leonidas and Tapan for providing me the codes. More power to you!
0
Whing Dela CruzAuthor Commented:
I posted similar question hope both of you guys still help me. Thank you!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.