Layout problem (not sure if this is CMSB related!)

6 posts by 3 authors in: Forums > CMS Builder
Last Post: August 30, 2016   (RSS)

Hi, All.

I did a version of my client's page before adding CMSB, which you can see here: http://www.commonsensedesign.net/extranet/icc/about-counsellors.php. On a wide screen, there are two rows of four columns. When I adapted this to work with CMSB, the columns don't align properly: http://interfaithcounselling.ca/about-counsellors.php.

Please see attached screengrabs.

I've also attached a static version of the page - which lays out as it's supposed to - and the CMSB version (about-counsellors.php).

Any suggestions, please?

======

Static code:

<!-- Blog Page Post Area Start -->
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Full Area Post Start -->
<div class="full-area-blog-post">
<div class="full-area-thumb"><p><br>&nbsp;<br></p><img src="img/team-lisa-akey.jpg" alt=""><br>&nbsp;<br></div> <div class="full-area-post-title-meta">
<h4 class="blog-post-title">LISA AKEY, Executive Director<br>Honours Psych, MSW, RSW</h4>
</div>
<ul>
<li>15+ years working in children's mental health residential treatment, including Clinical Director of Pioneer Youth Services and House of Friendship addictions services</li>
<li>Lisa is certified in Alternative Dispute Resolution and Mediation</li>
<li>With Interfaith since 2010. </li>
</ul><br>&nbsp;<br>
</div>
<!-- Full Area Post End -->
</div>

======

CMSB code:

<!-- Blog Page Post Area Start -->
<?php foreach ($meet_our_counsellorsRecords as $record): ?>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Full Area Post Start -->
<div class="full-area-blog-post">
<div class="full-area-thumb"><p><br>&nbsp;<br></p>
<?php foreach ($record['portrait'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" alt="<?php echo htmlencode($record['title']) ?>" />
<?php endforeach ?>
<br>&nbsp;<br></div>
<div class="full-area-post-title-meta"><h4 class="blog-post-title"><?php echo htmlencode($record['title']) ?>&nbsp;<?php echo htmlencode($record['job_title']) ?>
<br><?php echo htmlencode($record['qualifications']) ?></h4></div>
<?php echo $record['content']; ?>
<br>&nbsp;<br>
</div>
<!-- Full Area Post End -->
</div>
<?php endforeach ?>
<!-- Blog Page Post Area End -->

Thanks for the detailed feedback, Steve. That was really helpful. :-)

By Toledoh - August 29, 2016

FYI.  I use http://brm.io/jquery-match-height/ for this issue.  Rather than fixing a height, this identifies the highest div, then makes the others in that row the same height.

Cheers,

Tim (toledoh.com.au)

By Steve99 - August 30, 2016

Good resource Tim, bookmarked - thanks for sharing. We've also used flexbox with BS for similar needs (some with a JS fallback though).

Cheers,
Steve

Thanks, Toledoh! I'll look into this.