Attempting to generate a sample document and aiming to enlarge the font-size by clicking the "Medium" & "Large" button.
Encountering an issue where the font-size overlaps with other divs when pressing the "large" button, though not experiencing any problems with the "medium" button.
Query: Why does the text overlap when the font-size is increased?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#switcher-medium").click(function(){
alert('This is medium');
//$('body').removeClass();
$('body').addClass('medium');
});
$("#switcher-large").click(function(){
alert('This is large');
//$('body').removeClass();
$('body').addClass('large');
});
});
</script>
<style>
body{
background-color:white;
}
#header-1st{
height:30px;
width:70%;
float:left;
}
#switcher-control{
height:30px;
width:30%;
float:left;
}
.medium{
font-size: 1.5em;
}
.large{
font-size: 2.5em;
}
</style>
</head>
<body>
<div id="main-container">
<div id="header-1st">
</div>
<div id="switcher-control">
<button id="switcher-default">
Default
</button>
<button id="switcher-medium">
Medium
</button>
<button id="switcher-large">
Large
</button>
</div>
<div id="content">
This is a test page and you can increase the font-size by clicking the default, medium and large on top corner.
</div>
</div>
</body>
</html>