CODEWITHSUNDEEP
csstwitter-bootstrap
CoderT
CoderT

Reputation: 182

Div height in small resolution is not same

I am using bootstrap, so in laptop and desktop div working fine like:

enter image description here

but in Ipad or mobile, it became like:

enter image description here

HTML code:

  <div class="thumbnail_container">
  <div class="col-sm-3">
      <div class="thumbnail">
          <div class="caption">
           <h3>First Div Test</h3>
              <p>

              </p>
          </div>
      </div>
    </div>
     <div class="col-sm-3">
      <div class="thumbnail">
          <div class="caption">
           <h3>Second Div Test</h3>
              <p>

              </p>
          </div>
      </div>
    </div>
</div>

Here is CSS code to manage div display:

    .thumbnail_container .thumbnail
   {
     border-color: white;   
       color: black;
       width: 100%;
       padding-right: 0px;
       padding-left: 0px;
       padding-top: 0px;
       border-color: lightseagreen;

   }


   .thumbnail_container
   {
       text-align: center;
       margin-top: 30px;
   }


    .thumbnail span  
   {
      left:0; right:0;
       margin: auto;
   }

   .caption > p
   {
       color: black;
       width: 100%;
       margin-top: 0px;
       text-align: justify;

   }

How to make all div height same in any screen resolution?

Upvotes: 0

Views: 60

Answers (2)

Saif AL-Qiari
Saif AL-Qiari

Reputation: 469

change class="thumbnail_container" to class="thumbnail_container equal" and then copy the following code and paste it 

   /*make thumbnail div height equal */
   @media screen and (min-width: 768px) 
   {
     .equal, .equal > div[class*='col-'] 
     {  
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex:1 1 auto;
       }
      }

working fiddle

Upvotes: 1

ketan
ketan

Reputation: 19341

Just give display: flex; to .thumbnail_container and height: 100%; to .thumbnail will make equal height.

Working Fiddle

Upvotes: 0

Related Questions