CODEWITHSUNDEEP
csszurb-foundation
qusqui21
qusqui21

Reputation: 169

Responsive images with different sizes on same level

Hello i would like to get same row size of images as it is on example, but you can see that when you change size of window, bigger images are smaller than columns on left. I am fighting with it for a long time, and still didnt found solution. I need to have it with overlay text. So this is another problem. Thank you for any sugestions http://jsfiddle.net/sLk0jf4L/264/

<div class="row" data-equalizer>
<div class="small-3 columns col-left" data-equalizer-watch>
    <div class="row">
        <div class="small-12 columns">
            <img src="http://placehold.it/600x300" /> 
            <img src="http://placehold.it/600x300" /> 
        </div>
    </div>
</div>
    <div class="small-3 columns col-left" data-equalizer-watch>
    <div class="row">
        <div class="small-12 columns">
            <img src="http://placehold.it/600x300" /> 
            <img src="http://placehold.it/600x300" /> 
        </div>
    </div>
</div>
<div class="small-3 columns" data-equalizer-watch>
     <img src="http://placehold.it/600x645" /> 
</div>
<div class="small-3 columns" data-equalizer-watch>
 <img src="http://placehold.it/600x645" /> 
</div>
</div>

Upvotes: 0

Views: 69

Answers (1)

Razvan Marian Brinzila
Razvan Marian Brinzila

Reputation: 32

the issue comes from the padding

.col-left img:last-child {
    padding-top:1em;
}

when resizing the window, only the blocks are getting resized, the top padding is maintained

I recommend using a percentage there, in this particular case 8% seems to do the trick

.col-left img:last-child {
    padding-top:8%;
}

Upvotes: 1

Related Questions