I am facing an issue with the layout of my bootstrap site when resizing the 3 horizontal columns based on the window size upon page load.
Currently, I have a script that adjusts the height of each column to match the tallest one so they appear uniform when the page is resized. This method works perfectly if the user accesses the page from a large viewport or in full-screen mode. However, if the page is loaded in a smaller window, which triggers the collapsed layout, and then the window is expanded, the columns end up being shorter than the text content. A simple refresh of the window solves this problem.
To see this behavior in action, please refer to the JSFiddle link below and resize the window while running the script at a larger window size:
https://jsfiddle.net/ycs9psr3/1/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<style>
.well {
background-color: #b2dcf7;
border-radius: 10px;
}
.well > img {
margin-bottom: 30px;
}
.well > h4, .well > p {
color: #16405b;
}
.container {
background-color: white;
border-width: 0px 1px;
box-shadow: 0px 3px 20px grey;
}
body {
background-color: #f6f6f6;
font-family: Verdana;
min-width: 540px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="well well-sm">
<img src="Images/example.svg" alt="Example" width="128" height="128">
<h4>Box 1</h4>
<p>How do we resolve this How do we solve this How do we address this How do we mend this How do we fix this situation?</p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="well well-sm">
<img src="Images/example.svg" alt="Example" width="128" height="128">
<h4>Box 2</h4>
<p>How can this be fixed How can this be rectified How can this be resolved How can this be amended How can this situation be addressed?</p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="well well-sm">
<img src="Images/example.svg" alt="Example" width="128" height="128">
<h4>Box 3</h4>
<p>What steps are needed to repair this What needs to be done to fix this What actions can be taken to correct this situation?</p>
</div>
</div>
</div>
</div>
<script>
$( window ).resize(function() {
var heights = $(".well").map(function() {
return $(this).height();
}).get(),b
maxHeight = Math.max.apply(null, heights);
$(".well").height(maxHeight);
});
</script>
</body>
</html>
Your assistance with this matter would be greatly appreciated.