2

I have an issue with my bootstrap site regarding resizing the 3 horizontal columns depending on the window size when the page is loaded.

I have a script that will adjust the 3 columns to the height of the largest one so that they are even when the page is resized. This works fine if the user loads the page from a large viewport or full screen. However, if they load the page in a smaller window which loads the collapsed layout, then choose to expand the window the columns are smaller than the text. Refreshing the window obviously fixes it.

Take a look at the below JSFiddle and resize the window and re-run the scipt at a larger window size to see it work as intended.

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 to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </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 to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </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>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </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>

Any help appreciated.

Dean Potter
  • 55
  • 1
  • 6

2 Answers2

0

you are using only class="col-md-4. To make it work in small screens as well you need to use all the responsive classes class="col-md-4 col-sm-4 col-xs-4.

neophyte
  • 6,540
  • 2
  • 28
  • 43
0

I have modified your fiddle to include a CSS only version. You don't need any javascript in order keep similar height columns in bootstrap. See this in action over here: https://jsfiddle.net/ycs9psr3/2/

Related:

        body {
          background-color: #f6f6f6;
          font-family: Verdana;
          min-width: 540px;
        }
        
        .container {
          background-color: white;
        }
        
        .sameSize {
            display: flex;
            flex-wrap: wrap;
        }

        .sameSize > div[class*='col-'] {
            display: flex;
            flex-direction: column;
            background-color: #b2dcf7;
            background-clip: padding-box;
            border: 10px solid transparent;
            border-radius: 20px;
        }
        
        .well {
          background-color: #b2dcf7 !important;
          border:none !important;
        }
        
        .well > img {
          margin-bottom: 30px;
        }
        
        .well > h4,
        .well > p {
          color: #16405b;
        }
        
        
        
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row sameSize">
    <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 to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </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 to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </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>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>
      </div>
    </div>
  </div>
</div>
Community
  • 1
  • 1
R T
  • 1,038
  • 9
  • 17