CODEWITHSUNDEEP
htmlcss
T.Doe
T.Doe

Reputation: 2035

How do I make these three aligning divs responsive?

On my website home page (https://abbaproperty.000webhostapp.com/) I have three divs inline that look like this:

enter image description here

But when viewed on a slightly smaller scree (not mobile), it looks like this:

enter image description here

They're no longer the same height. Although I have added some responsive CSS so it does look like this on a smaller mobile device.

enter image description here

So my question here is that there is a sweet spot where these divs are not displayed very well responsively and I can't think of even the logical CSS to get around this.

HTML:

<div class="container" style="width:100%; background-color:#205ba0; padding:30px;">

    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
        A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:15px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
        Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
        We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>

</div>

Upvotes: 0

Views: 91

Answers (6)

Snowolf
Snowolf

Reputation: 34

You should use flexbox and media queries

CSS:

.container > div {
    display: block;
}

@media (min-width: 640px) {
    .container {
        display: flex;
    }
    .container > div {
        flex: 1 1 auto;
    }
}

With flexbox all of the container children will be equal height.

CSS tricks tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Chukwu Remijius
Chukwu Remijius

Reputation: 323

Put 

<div class='row'>

after the container class. It makes the div layer responsive Also put class="img-responsive" on the image tag to make it responsive too

<div class="container" style="width:100%; background-color:#205ba0; padding:30px;">
<div class="row">
    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
        A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:15px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
        Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
        We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>
</row>
</div>

Upvotes: 0

WizardCoder
WizardCoder

Reputation: 3461

You can do it with display:table and display:table-cell. Only use flex when you can't do it any other way.

* {
  box-sizing: border-box;
}
.table {
  display: block;
  table-layout:fixed;
}
.table-cell {
  display: block;
  width:100%;
}
@media screen and (min-width: 640px) {
  .table {
    display: table;
    table-layout:fixed;
  }
  .table-cell {
    display: table-cell;
    width:33.333%;
  }
}
<div class="container table" style="width:100%; background-color:#205ba0; padding:30px;">

    <div class="col-md-offset-3 col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
      <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
        <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
      </div>  
      <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
      A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
      <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
      <div class="trip" style="background-color:white; margin-bottom:15px;">
        <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
      </div>
      <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
    Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
      <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2 table-cell" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
      <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
        <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
      </div>
      <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
      We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
      <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>

</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

Just add display: flex to .container (without wrap)

Upvotes: 2

Gerard
Gerard

Reputation: 15786

Defined .container as flexbox and added additional styling properties as defined in CSS.

.container {
display: flex;
justify-content: space-around;
align-items: stretch;
}
<div class="container" style="width:100%; background-color:#205ba0; padding:30px;">

    <div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/rent.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
        A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/property-management/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:15px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/val.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
        Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/valuations/" style="color:white;">Find out more ></a>
    </div>

    <div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
        <div class="trip" style="background-color:white; margin-bottom:10px; padding-bottom:5px;">
            <img src="https://abbaproperty.000webhostapp.com/wp-content/uploads/2017/05/sale.png" style="height:100px;">
        </div>
        <h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
        We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
        <a href="https://abbaproperty.000webhostapp.com/index.php/sell/" style="color:white;">Find out more ></a>
    </div>

</div>

Upvotes: 1

Amy
Amy

Reputation: 1098

You would need to use flexbox for this!

On your container, add another class called flexbox and add the following:

.flexbox {
    display: flex;
}

Heres a fiddle!

https://jsfiddle.net/d6xfu1yz/

Upvotes: 0

Related Questions