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!

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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.