Menu icon Foundation
How to match two rows

This is so simple question and it took me almost a full day to come up with some sort of solution. I had to use so many divs that the code structure is so ugly my eyes hurt. So I know there must be more elegant solution but nothing comes to my mind, yet.
Finish result, and what I want to accomplish is on the first image (i won't show you the code because there are so many divs your head will pop).

Selection 003

How this all looks up at the beginning, after just copy/paste code from one of the Foundation templates (troublesome corner is circled in red).

Selection 004

<div class="row">
    <div class="large-12 columns show-for-medium-up hide-for-medium-down">
        <img src="http://placehold.it/1250x600&text=Thumbnail" alt="slide image">
    </div>
    <div class="small-12 columns show-for-small-only">
        <img src="http://placehold.it/1000x600&text=For Small Screens"/>
    </div>
</div>

<div class="row content-background">
    <div class="large-12">
        <h2 class="hide-for-small">NEWS</h2>

            <div class="small-12 large-6 columns content-background">
                <img src="http://placehold.it/250x133&text=Thumbnail"/>
            </div>
            <div class="small-12 large-6 columns content-background">
                <img src="http://placehold.it/250x133&text=Thumbnail"/>
            </div>
    </div>
</div>
            

         

So I just need to somehow align first row which contains the image with the second row which have white background (class="content-background").
And if possible with as few divs as possible (I don't want to clutter the code with unneeded divs)

alignrowimage

This is so simple question and it took me almost a full day to come up with some sort of solution. I had to use so many divs that the code structure is so ugly my eyes hurt. So I know there must be more elegant solution but nothing comes to my mind, yet.
Finish result, and what I want to accomplish is on the first image (i won't show you the code because there are so many divs your head will pop).

Selection 003

How this all looks up at the beginning, after just copy/paste code from one of the Foundation templates (troublesome corner is circled in red).

Selection 004

<div class="row">
    <div class="large-12 columns show-for-medium-up hide-for-medium-down">
        <img src="http://placehold.it/1250x600&text=Thumbnail" alt="slide image">
    </div>
    <div class="small-12 columns show-for-small-only">
        <img src="http://placehold.it/1000x600&text=For Small Screens"/>
    </div>
</div>

<div class="row content-background">
    <div class="large-12">
        <h2 class="hide-for-small">NEWS</h2>

            <div class="small-12 large-6 columns content-background">
                <img src="http://placehold.it/250x133&text=Thumbnail"/>
            </div>
            <div class="small-12 large-6 columns content-background">
                <img src="http://placehold.it/250x133&text=Thumbnail"/>
            </div>
    </div>
</div>
            

         

So I just need to somehow align first row which contains the image with the second row which have white background (class="content-background").
And if possible with as few divs as possible (I don't want to clutter the code with unneeded divs)

Rafi Benkual almost 5 years ago

I'm assuming you meant the news text does not line up in the grid? You're missing the columns class on the content-bacground wrapper - http://codepen.io/rafibomb/pen/zxapMd

Vladimir almost 5 years ago

Rafi, here is the fork with added definitions in CSS for body and content-background
http://codepen.io/anon/pen/VYdQzJ
Problem still persists.

Vladimir almost 5 years ago

Well I think I found a solution but need someone to confirm is this the correct way to solve this problem or not. And if yes why do I need to use padding: 0 0.95rem; and not padding: 0 1rem;?
http://codepen.io/anon/pen/xbzYQB

Shoaib Iqbal almost 5 years ago

Hi Vladimir, The issue is that background color applies to the padding also, while in the first container the image is pushed by 15px (padding) and on the second background color is not pushed. You can add class "collpase" to the first .row and the image will be not pushed.

see http://codepen.io/shoaibik/pen/vEraWx

Vladimir almost 5 years ago

Thanks Shoaib, this is what I needed. But in all documents .collapse class is mentioned in 3 sentences that is why I missed it.