Hi. So first real world project on couch, will be purchasing a license soon. It's a simple 3 page site and everything's going smoothly, except for one issue. We are forced to use backend logic (since CSS does not natively support equal height columns in rows - except for flexbox, perhaps).
Screenshot attached.
Basically, I need to output two divs within a 'row' div (I'm using CSS tables for this to get equal height divs in each row. My programmer has helped me with the same and it works as expected, but we were wondering whether this is the optimal solution.
Here is the code we are using and it works, would be great if you can go through and advise if there's a better option.
<div class="recentProjects">
<cms:show_repeatable startcount='0' 'home_projects'>
<cms:set remainder="<cms:mod k_count '2' />" />
<cms:if remainder='0'>
<div class="projectEachRow">
</cms:if>
<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="<cms:show home_project_image />" alt="<cms:show home_project />">
</div>
<div class="projectText">
<div><strong><cms:show home_project /></strong></div>
<div class="projectDesc"><cms:show home_project_text />Researched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->
<cms:if remainder='1'>
</div> <!-- /projectEachRow -->
</cms:if>
<cms:set count_1="<cms:add k_count '1' />" />
<cms:if (remainder='0') && (count_1 == k_total_records)>
</div> <!-- /projectEachRow -->
</cms:if>
</cms:show_repeatable>
</div> <!-- end recent projects -->
If you need to take a look, here is the markup generated from the code above, pasted from viewing the source
<div class="projectEachRow">
<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="http://jimdowning.local.com/cms/uploads/image/dummy-1.jpg" alt="Hi there lovely">
</div>
<div class="projectText">
<div><strong>Hi there lovely</strong></div>
<div class="projectDesc">Weather's great aint it?Researched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->
<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="http://jimdowning.local.com/cms/uploads/image/clients/us-fish-wildlife.jpg" alt="foobar">
</div>
<div class="projectText">
<div><strong>foobar</strong></div>
<div class="projectDesc">uhuhu ygygygygygyResearched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->
</div> <!-- /projectEachRow -->
<div class="projectEachRow">
<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="http://jimdowning.local.com/cms/uploads/image/dummy-1.jpg" alt="yessir">
</div>
<div class="projectText">
<div><strong>yessir</strong></div>
<div class="projectDesc">i knowResearched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->
</div> <!-- /projectEachRow -->
Thanks,
Karen
Screenshot attached.
Basically, I need to output two divs within a 'row' div (I'm using CSS tables for this to get equal height divs in each row. My programmer has helped me with the same and it works as expected, but we were wondering whether this is the optimal solution.
Here is the code we are using and it works, would be great if you can go through and advise if there's a better option.
<div class="recentProjects">
<cms:show_repeatable startcount='0' 'home_projects'>
<cms:set remainder="<cms:mod k_count '2' />" />
<cms:if remainder='0'>
<div class="projectEachRow">
</cms:if>
<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="<cms:show home_project_image />" alt="<cms:show home_project />">
</div>
<div class="projectText">
<div><strong><cms:show home_project /></strong></div>
<div class="projectDesc"><cms:show home_project_text />Researched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->
<cms:if remainder='1'>
</div> <!-- /projectEachRow -->
</cms:if>
<cms:set count_1="<cms:add k_count '1' />" />
<cms:if (remainder='0') && (count_1 == k_total_records)>
</div> <!-- /projectEachRow -->
</cms:if>
</cms:show_repeatable>
</div> <!-- end recent projects -->
If you need to take a look, here is the markup generated from the code above, pasted from viewing the source
<div class="projectEachRow">
<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="http://jimdowning.local.com/cms/uploads/image/dummy-1.jpg" alt="Hi there lovely">
</div>
<div class="projectText">
<div><strong>Hi there lovely</strong></div>
<div class="projectDesc">Weather's great aint it?Researched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->
<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="http://jimdowning.local.com/cms/uploads/image/clients/us-fish-wildlife.jpg" alt="foobar">
</div>
<div class="projectText">
<div><strong>foobar</strong></div>
<div class="projectDesc">uhuhu ygygygygygyResearched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->
</div> <!-- /projectEachRow -->
<div class="projectEachRow">
<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="http://jimdowning.local.com/cms/uploads/image/dummy-1.jpg" alt="yessir">
</div>
<div class="projectText">
<div><strong>yessir</strong></div>
<div class="projectDesc">i knowResearched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->
</div> <!-- /projectEachRow -->
Thanks,
Karen