Responsive Height Columns in Article

Question

I am trying to fix a formatting Error in a Joomla! Project I took over in my School.

Currently they used a HTML Instructions (as far as I unterstand this) in the Article.

[columns add_margins=true css="z-index:4;"] [column width_sm="4"] [html]
  //Content of first Column
[/html] [/column] [column width_sm="4" css="position:relative;"] [html]
  //Content of second Column
[/html] [/column] [column width_sm="4"] [html]
  //Content of third Column
[/html] [/column] [/columns] [fluid][html ]
[/html][/fluid]

The problem now is, that if theire Content (Lines like this: <p style="text-align: center;">M, Bsp, Erste-Hilfe-Beauftragter</p>) is multiple Rows long, the Lines are getting messed up (see img). I tried using Flex-Boxes which resulted in a mess, but the person maintaining the content, wants to stick to the current form.

Problem Image

The Editor View looks like this:

<p>[columns add_margins=true css="z-index:4;"] [column width_sm="4"] [html]</p>
<p> </p>
<h5 style="text-align: center;">Beiglböck Matthias, BEd</h5>
<p style="text-align: center;"><a href="joomplu:52 type=img"><img class="jg_photo" src="index.php?option=com_joomgallery&amp;view=image&amp;format=raw&amp;id=52&amp;type=thumb" alt="joomplu:52" /></a>  </p>
<p style="text-align: center;">M, Bsp, Erste-Hilfe-Beauftragter</p>
<hr />

<p>[/html] [/column] [column width_sm="4" css="position:relative;"] [html ]</p>
<p> </p>
<h5 style="text-align: center;">Beiglböck Matthias, BEd</h5>
<p style="text-align: center;"><a href="joomplu:52 type=img"><img class="jg_photo" src="index.php?option=com_joomgallery&amp;view=image&amp;format=raw&amp;id=52&amp;type=thumb" alt="joomplu:52" /></a>  </p>
<p style="text-align: center;">M, Bsp, Erste-Hilfe-Beauftragter</p>
<hr />

<p>[/html] [/column] [column width_sm="4"] [html ]</p>
<p> </p>
<h5 style="text-align: center;">Beiglböck Matthias, BEd</h5>
<p style="text-align: center;"><a href="joomplu:52 type=img"><img class="jg_photo" src="index.php?option=com_joomgallery&amp;view=image&amp;format=raw&amp;id=52&amp;type=thumb" alt="joomplu:52" /></a>  </p>
<p style="text-align: center;">M, Bsp, Erste-Hilfe-Beauftragter</p>
<p>[/html] [/column] [/columns] [fluid][html ]</p>
<p>[/html][/fluid]</p>

Is their a way I can stick to this method without throwing away everything or is this a complete mess and has to be redone? I am complete new to Joomla! Running Joomla! 3.8

Full Website here*

Thanks in advance!

Answer 1

It looks like there is a plugin in your site that provides short-codes, which can be used inside the content to help produce specific mark-up on the output.

In this specific case and after inspecting the live webpage, it seems like the whole page content has been divided in 3 "columns" using something like:

 [fluid]
 [columns add_margins=true css="z-index:4;"]
 [column width_sm="4"]
 [html]
   <!--THIS IS COLUMN 1-->
   <p>Person 1 Name</p>
   <p>Person 1 Image</p>
   <p>Person 1 Subtext</p>
   <hr>
   <p>Person 2 Name</p>
   <p>Person 2 Image</p>
   <p>Person 2 Subtext</p>
   <hr>
 [/html]
 [/column]

 [column width_sm="4"]
 [html]
   <!--THIS IS COLUMN 2-->
   <p>Person 3 Name</p>
   <p>Person 3 Image</p>
   <p>Person 3 Subtext</p>
   <hr>
   <p>Person 4 Name</p>
   <p>Person 4 Image</p>
   <p>Person 4 Subtext</p>
   <hr>
 [/html]
 [/column]

 [column width_sm="4"]
 [html]
   <!--THIS IS COLUMN 3-->
   <p>Person 5 Name</p>
   <p>Person 5 Image</p>
   <p>Person 5 Subtext</p>
   <hr>
   <p>Person 6 Name</p>
   <p>Person 6 Image</p>
   <p>Person 6 Subtext</p>
   <hr>
 [/html]
 [/column]
 [/columns]
 [fluid]

Well, this produces what you actually see in your front-end page, which is a Bootstrap grid layout - which at a first level is the skeleton for the desired layout for that page.

However, the problem in your implementation is that after setting up the first row with its 3 column divs, all the content has been placed inside there.

For your situation what you actually have to do in order to achieve an acceptable layout is to use 1 of the following:

[column]
[html]
   <p>Person 1 Name</p>
   <p>Person 1 Image</p>
   <p>Person 1 Subtext</p>
[/html]
[/column] 

for each person you want to show in this page.

Furthermore, you can also wrap every 3 columns inside a new row using the:

[fluid]
[columns add_margins=true css="z-index:4;"]
[/columns]
[fluid]

So at the end, in your editor you would end-up with something like:

<!-- #### First row of persons #### -->
[fluid]
[columns add_margins=true css="z-index:4;"]

  [column]
    [html]
       <!--THIS IS ROW 1 COLUMN 1-->
       <p>Person 1 Name</p>
       <p>Person 1 Image</p>
       <p>Person 1 Subtext</p>
    [/html]
  [/column] 

  [column]
    [html]
       <!--THIS IS ROW 1 COLUMN 2-->
       <p>Person 2 Name</p>
       <p>Person 2 Image</p>
       <p>Person 2 Subtext</p>
    [/html]
  [/column] 

  [column]
    [html]
       <!--THIS IS ROW 1 COLUMN 3-->
       <p>Person 3 Name</p>
       <p>Person 3 Image</p>
       <p>Person 3 Subtext</p>
    [/html]
  [/column]

[/columns]
[fluid]

<!-- #### Second row of persons #### -->
[fluid]
[columns add_margins=true css="z-index:4;"]

  [column]
    [html]
       <!--THIS IS ROW 2 COLUMN 1-->
       <p>Person 4 Name</p>
       <p>Person 4 Image</p>
       <p>Person 4 Subtext</p>
    [/html]
  [/column] 

  [column]
    [html]
       <!--THIS IS ROW 2 COLUMN 2-->
       <p>Person 5 Name</p>
       <p>Person 5 Image</p>
       <p>Person 5 Subtext</p>
    [/html]
  [/column] 

  [column]
    [html]
       <!--THIS IS ROW 2 COLUMN 3-->
       <p>Person 6 Name</p>
       <p>Person 6 Image</p>
       <p>Person 6 Subtext</p>
    [/html]
  [/column]

[/columns]
[fluid]

Making up your layout this way, you will end up with proper mark-up that it will be based on Bootstrap grid - which will handle almost everything regarding the layout and alignments. In addition, you will be able to handle and style it in the front-end using css, if you need to.

Your goal for the final outcome should be something like below:

<!-- #### First row of persons #### -->
<div class="row">
    <div class="col-sm-4">
       <!--THIS IS ROW 1 COLUMN 1-->
       <p>Person 1 Name</p>
       <p>Person 1 Image</p>
       <p>Person 1 Subtext</p>
    </div>

    <div class="col-sm-4">
       <!--THIS IS ROW 1 COLUMN 2-->
       <p>Person 2 Name</p>
       <p>Person 2 Image</p>
       <p>Person 2 Subtext</p>
    </div>

    <div class="col-sm-4">
       <!--THIS IS ROW 1 COLUMN 3-->
       <p>Person 3 Name</p>
       <p>Person 3 Image</p>
       <p>Person 3 Subtext</p>
    </div>
</div>

<!-- #### Second row of persons #### -->
<div class="row">
    <div class="col-sm-4">
       <!--THIS IS ROW 2 COLUMN 1-->
       <p>Person 4 Name</p>
       <p>Person 4 Image</p>
       <p>Person 4 Subtext</p>
    </div>

    <div class="col-sm-4">
       <!--THIS IS ROW 2 COLUMN 2-->
       <p>Person 5 Name</p>
       <p>Person 5 Image</p>
       <p>Person 5 Subtext</p>
    </div>

    <div class="col-sm-4">
       <!--THIS IS ROW 2 COLUMN 3-->
       <p>Person 6 Name</p>
       <p>Person 6 Image</p>
       <p>Person 6 Subtext</p>
    </div>
</div>

---

PS1.
Don't start applying whatever I show you here directly on the real article of your page. I am not 100% sure that the short-codes I used here are the correct ones. This depends on the plugin that is used that provides those short-codes. So consult the plugin's documentation and test the syntax on a testing article.

PS2.
I am not a fan of such approaches and plugins generally. As the final outcome is that there is no clean content for the website and it will depend on a specific plugin in order to display the content of a page in a viewable and readable way. Are there other approaches? - Certainly, but this is another long discussion and in any case it depends on the unique requirements of each project.