0

I'm working on responsive column based layout with each column containing text of different length. I'm using bootstrap grid to get the responsiveness, but I have problem with setting the hight of inner div for each column in full screen mode. I need to have something similar to this picture borrowed from similar stack-overflow question.

enter image description here

Solutions that I could find does not work in my case since I'm dealing with the height of the grandchild of outer .

Below is simplified version of HTML and CSS code. (I've removed unnecessary styles and tags for this example.) I need the height of the ".campaign-description" div to take the full height of ".campaign-block" div.

Is it even possible to do it with this layout?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <style>
        .align-center {
            text-align: center;
        }

        .grid {
            display:flex;
        }

        @media screen and (max-width: 450px){
            .grid {
                display : block;
            }
        }

        .campaign-block {
            flex:1;
            border: 1px solid;
        }

        .campaign-description {
            flex:1;
            background-color: #a05b4e;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <section>
        <div class="row">
            <div class="col-sm-12 align-center">
                <div class="align-center">
                    <b>Atape tehe migicur miesa telalem yiso ipipire;</b>
                </div>
                <div class="row grid">
                    <div class="col-xs-12 col-sm-6 align-center campaign-block">
                        <div class="st-smc-offer-image">
                            <img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
                        </div>
                        <div class="campaign-description">
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            <div>
                                <a href="http://google.com">Do smth</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 align-center campaign-block">
                        <div class="st-smc-offer-image">
                            <img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
                        </div>
                        <div class="campaign-description">
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            <div>
                                <a href="http://google.com">Do smth</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
41 72 6c
  • 1,600
  • 5
  • 19
  • 30
user2992672
  • 398
  • 1
  • 3
  • 10

2 Answers2

1

As far as I know, Flexbox only works between parent and child, not parent and grandchild. This means Flexbox set on <div class="row grid"> does not directly affect its grandchild, <div class="campaign-block">.

To achieve .campaign-description taking up the remaining space on the bottom, you can introduce Flexbox on .campaign-block and set flex-direction: column so its children display from top to bottom.

Then, .campaign-description should take up the remaining space on the bottom because flex: 1, or flex-grow: 1, will tell it to expand.

.align-center {
    text-align: center;
}

.grid {
    display: flex;
}

.campaign-block {
    /* Introduce Flexbox */
    display: flex;
    
    /* By default, flex-direction is set to row. I changed it to column
       because I wanted the children of .campaign-block to display from
       top to bottom. */
    flex-direction: column;
    flex: 1;
    border: 1px solid;
}

.campaign-description {
    /* Since you have flex: 1, .campaign-description will take up the
       remaining space on the bottom. */
    flex: 1;
    background-color: #a05b4e;
    color: #ffffff;
}

@media screen and (max-width: 450px){
    .grid {
        display: block;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>

<!-- Removed indentations to improve readability -->

<section>
<div class="row">
<div class="col-sm-12 align-center">
    
    <!-- Section title -->
    <div class="align-center">
        <b>Atape tehe migicur miesa telalem yiso ipipire;</b>
    </div>
                
    <div class="row grid">

        <!-- Left pane -->
        <div class="col-xs-12 col-sm-6 align-center campaign-block">
            <div class="st-smc-offer-image">
                <img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
            </div>
            
            <div class="campaign-description">
                Reno ala vimir de. Lal so pes yeti itu. <br>
                Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
                nisecem tu acodeb imemoca robeci toyo cono. <br>
                refigib redok lelep ece mec sahal. Hudetil run ewona mef.
                
                <div>
                    <a href="http://google.com">Do smth</a>
                </div>
            </div>
        </div>

        <!-- Right pane -->
        <div class="col-xs-12 col-sm-6 align-center campaign-block">
            <div class="st-smc-offer-image">
                <img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
            </div>
            
            <div class="campaign-description">
                Reno ala vimir de. Lal so pes yeti itu. <br>
                Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
                nisecem tu acodeb imemoca robeci toyo cono. <br>
                refigib redok lelep ece mec sahal. Hudetil run ewona mef.<br>
                Reno ala vimir de. Lal so pes yeti itu. <br>
                Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
                nisecem tu acodeb imemoca robeci toyo cono. <br>
                refigib redok lelep ece mec sahal. Hudetil run ewona mef.<br>
                
                <div>
                    <a href="http://google.com">Do smth</a>
                </div>
            </div>
        </div>
        
    </div>
    
</div>
</div>
</section>

</body>
</head>
khan
  • 1,466
  • 8
  • 19
0

you can try this way

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <style>
        .grid--article {
   padding-bottom: 10px;
   display: grid;
   grid-template-columns: 50% 50%;
   grid-gap: 0.5rem;
  }
  .st-smc-offer-image {
   display:block;
   text-align:center;
   background:#FFF;
  }
  .grid--wrapper {
   text-aling:center;
   background-color: #a05b4e;
  }
    </style>
    </head>
    <body>
    <section>
        <div class="row">
            <div class="col-sm-12 align-center">
                <div class="align-center">
                    <b>Atape tehe migicur miesa telalem yiso ipipire;</b>
                </div>
    
    <div class="grid--article">
     <div class="grid--wrapper">
      <div class="st-smc-offer-image">
       <img 
    src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
      </div>
      <div class="campaign-description">
       Reno ala vimir de. Lal so pes yeti itu. <br>
       Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
       nisecem tu acodeb imemoca robeci toyo cono. <br>
       refigib redok lelep ece mec sahal. Hudetil run ewona mef.
       <div>
        <a href="http://google.com">Do smth</a>
       </div>
      </div>
     </div>
     <div class="grid--wrapper">
      <div class="st-smc-offer-image">
       <img 
    src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
      </div>
      <div class="campaign-description">
       Reno ala vimir de. Lal so pes yeti itu. <br>
       Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
       nisecem tu acodeb imemoca robeci toyo cono. <br>
       refigib redok lelep ece mec sahal. Hudetil run ewona mef.
       Reno ala vimir de. Lal so pes yeti itu. <br>
       Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
       nisecem tu acodeb imemoca robeci toyo cono. <br>
       refigib redok lelep ece mec sahal. Hudetil run ewona mef.
       <div>
        <a href="http://google.com">Do smth</a>
       </div>
      </div>
     </div>
    </div>
    
    
            </div>
        </div>
     </section>
    </body>
    </head>
    </html>
RDKudalkar
  • 1