CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3grid-layout
webnuts.io
webnuts.io

Reputation: 73

Responsive Grid-layout: Img height scales different on smaller viewport sizes

I'm making a new site based on bootstrap: Link. The homepage contains a grid system with a lot of uneven columns. See picture below:

Grid with uneven columns containing imgs with text overlay

The problem ist that on different viewport width the height of the images gets scaled down different. See second image below...

Height scales different on smaller viewport sizes

How can I solve this problem? I want all imgs at all time to keep the same height so the margins between the rows stay the same.

Thanks for your help guys!

Upvotes: 0

Views: 598

Answers (2)

Qanser
Qanser

Reputation: 39

You can do it according to the example found here.

See example. http://codepen.io/desandro/pen/dPzpBd

HTML

<div class="grid">
<div class="grid-sizer"></div>
<div class="item large h2">40%</div>
<div class="item small h2">25%</div>
<div class="item medium">35%</div>
<div class="item medium h2">35%</div>
<div class="item small">25%</div>
<div class="item large">40%</div>
</div>

CSS

* { box-sizing: border-box; }

.grid-sizer { width: 5%; }

.item {
float: left;
background: #D10;
height: 100px;
border-right: 2px solid white;
border-bottom: 2px solid white;
font-size: 36px;
color: white;
}
.item.small { width: 25%; }
.item.medium { width: 35%; }
.item.large { width: 40%; }
.item.h2 { height: 150px; }

JS

$('.grid').masonry({
itemSelector: '.item',
columnWidth: '.grid-sizer'
});

Upvotes: 3

user4233921
user4233921

Reputation:

You need to make sure that you have one row per 12 cols.

Right now you have way too many columns in a single row.

Follow the structure of container > row > col.

Upvotes: 0

Related Questions