CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Pantelis
Pantelis

Reputation: 339

Div with columns overlaps elements while resizing

Okay so i have a div with a container and 3 equal columns inside.Every column has a card with fixed height and width inside. However, below 1200px my design for a reason is breaking. What i mean is that when i resize to 1200px columns start to merge together and eventually in smaller sizes they tend to overlap the div and my footer. I know its complicated so here's some code.

----------HTML---------- 

      <!-- 2nd card -->
            <div class="col-md-4">
                <div class="card">
                <div class="cardoverlay"> 
                </div>
                </div>
             </div>
      <!-- 3rd card -->
            <div class="col-md-4">
                <div class="card">
                    <div class="cardoverlay">
                    </div>
                </div>
                </div>
  </div>
  </div>
  </div>

-----------CSS-----------

.categories {
        background-color: #e1e1e1;
        height: 800px;  
    }
    .card {
        width: 353px;
        height: 662px;
        -webkit-border-radius: 5px/7px;
        -moz-border-radius: 5px/7px;
        border-radius: 8px/10px;
        background-color: #fff;
        -webkit-box-shadow: 0 2px #b8b3b3;
        -moz-box-shadow: 0 2px #b8b3b3;
        box-shadow:  3px #b8b3b3;
        margin-top: 50px;

    }
    .cardoverlay {
        width: 353px;
        height: 202px;
        -webkit-border-radius: 5px 5px 0 0/10px 10px 0 0;
        -moz-border-radius: 5px 5px 0 0/10px 10px 0 0;
        border-radius: 5px 5px 0 0/10px 10px 0 0 #f1f1f1;
        background-color: #f9f9f9;
        -webkit-box-shadow: 0 3px #f1f1f1;
        -moz-box-shadow: 0 3px #f1f1f1;
        box-shadow: 0 3px #f1f1f1;

The columns at this point are getting merged. https://i.sstatic.net/0kvBi.jpg

P.S i am using container instead of container-fluid so i can get the columns the one next to each other.

Upvotes: 1

Views: 1242

Answers (1)

Paul Redmond
Paul Redmond

Reputation: 3296

You are using a specific width rule, meaning the divs will always stay at those sizes. When the browser is re-sized smaller they will run over each other.

If you use a percentage based layout % this will not happen as they will scale relative to the container size.

.card, .cardoverlay {
  width: 33%;
}

Upvotes: 1

Related Questions