CODEWITHSUNDEEP
htmlcssbootstrap-4
newhouse-pt
newhouse-pt

Reputation: 141

Columns not staking in smaller screens

I am using a simple layout in bootstrap but cannot make the page fully responsive. The columns are not stacking when I reduce the browser width.

I already tried the SO suggestions below but none helped:

You can check an online version of my problem here. You can see that the columns are not stacking.

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
    </div>
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
    </div>
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
    </div>
</div>

Upvotes: 0

Views: 70

Answers (1)

Wimanicesir
Wimanicesir

Reputation: 5121

Following lines in your CSS override the normal widths of bootstrap. Remove or adjust following lines if you don't want fixed sizes for all columns.

.articles-area .row [class*="col-"]{
    float: none;
    display: table-cell;
    vertical-align: top;
    width: 33%;
}

Upvotes: 1

Related Questions