Jump to content
kazaq6

How do you make W3CSS Columns the same height?

Recommended Posts

I'm having trouble using the w3-col feature to arrange these captioned pictures. I want to make the containers with less text match the height of the first container that has more type in it. At full screen everything displays correctly, but once the text on the first image takes an extra line, the rows below get all jumbled up.

I don't want to use a table or cells because I want them to go down to 2 wide on small devices.

Thanks in advance for any help.

Heres the code;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Red Stick Sports - Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>

<div class="w3-container w3-red w3-margin-bottom">
    <h1>Our Services</h1>
</div>

<div class="w3-row">
     
     <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border">
        <div class="w3-container">
              <img src="images/home/br-blues-black-2b-jersey.jpg" style="width:100%">
          
          
            <p>One color prints come out great with our design included pricing. </p>
          
          </div>
    </div>
     

     <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border">
         <div class="w3-container">
          <img src="images/home/lsu-tiger-eye.jpg" style="width:100%">
          
          
            <p>We are a licensed printer for LSU. </p>
          
          </div>
    </div>
     
         
     <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border">
         <div class="w3-container">
          <img src="images/home/dream-logos-full.jpg" style="width:100%">
          
            <p>4 Color Process prints can simulate photographs.</p>
          
          </div>
    </div>
        
     
     <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border">
        <div class="w3-container">
              <img src="images/home/br-blues-black-2b-jersey.jpg" style="width:100%">
          
          <div class="w3-container">
        <p>One color prints come out great with our design included pricing. <b></b></p>
          </div>
          </div>
    </div>
     

     <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border">
         <div class="w3-container">
          <img src="images/home/lsu-tiger-eye.jpg" style="width:100%">
          
          <div class="w3-container">
            <p>We are a licensed printer for LSU. </p>
          </div>
          </div>
    </div>
     
         
     <div class="w3-col s6 m4 l4 w3-margin-bottom">
         <div class="w3-container">
          <img src="images/home/dream-logos-full.jpg" style="width:100%">
          <div class="w3-container">
            <p>4 Color Process prints can simulate photographs.</p>
          </div>
          </div>
    </div>
        
</div>


</body>
</html>

column-problem.JPG

Share this post


Link to post
Share on other sites

Just noticed a mistake, the css is using a .flex class it should be like this,

corrected css

https://www.w3schools.com/code/tryit.asp?filename=FTEKPYO1FKQ3

however if you prefer the original you can use it but just remove

.w3-row.custom-flex.flex > .w3-col {flex: 1 0 290px;} as it is obsolete there is no .flex class element so its reverting to default setting for parent class styling display: flex;

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×