Blog Menu Layout

[niosme]

Steps to reproduce the issue

New article with text.

<div id="test">
<p>Proin pharetra gravida leo condimentum volutpat. Pellentesque luctus odio enim, eu viverra ante scelerisque vel. Fusce pellentesque vitae lacus dignissim ultricies. Suspendisse sed ex nisi. Curabitur varius orci vel elementum feugiat. Donec non neque luctus, suscipit justo id, suscipit neque. Curabitur faucibus ornare laoreet. Ut dapibus accumsan lectus, placerat ornare sem maximus quis.</p>
<hr id="system-readmore">
<p>Nam sed convallis tortor. Donec sodales sollicitudin sapien, eu porttitor mauris euismod nec. Pellentesque cursus dapibus sem bibendum fermentum. Phasellus at porta arcu. Quisque a massa ut sem ultrices tempor. Proin rutrum laoreet placerat. Ut ut turpis gravida mauris rutrum porttitor. Curabitur feugiat molestie blandit.</p>
</div>

Put some more articles e.g. 2 more articles after.

The div id="test" does the job in combination with the readmore. Without hr read more it works fine. This is happened in real website so also others may have the same problem or recreate it without figuring it out.

Expected result

Load just fine the categories in a 3 column as they are .blog-item > .item-content .blog-item > .item-content .blog-item > .item-content

Actual result

The articles are inside the previous ones divs. .blog-item > .item-content > .blog-item > .item-content > .blog-item > .item-content And shows them in one column all inside first article.

<div class="com-content-category-blog__item blog-item">
  <figure class="top item-image">
    <a href="index.php/anakoinoseis/anakoinose-3.html" title="Ανακοίνωση 3">
      <img src="/images/banners/banner6.png" width="626" height="417" loading="lazy">
    </a>
  </figure>
  <div class="item-content">
    <div class="page-header">
      <h2>
        <a href="/index.php/anakoinoseis/anakoinose-3.html"> Ανακοίνωση 3 </a>
      </h2>
    </div>
    <div id="test">
      <p>Proin pharetra gravida leo condimentum volutpat. Pellentesque luctus odio enim, eu viverra ante scelerisque vel. Fusce pellentesque vitae lacus dignissim ultricies. Suspendisse sed ex nisi. Curabitur varius orci vel elementum feugiat. Donec non neque luctus, suscipit justo id, suscipit neque. Curabitur faucibus ornare laoreet. Ut dapibus accumsan lectus, placerat ornare sem maximus quis.</p>
      <p class="readmore">
        <a class="btn btn-secondary" href="/index.php/anakoinoseis/anakoinose-3.html" aria-label="Περισσότερα: Ανακοίνωση 3">
          <span class="icon-chevron-right" aria-hidden="true"></span> Περισσότερα: Ανακοίνωση 3 </a>
      </p>
    </div>
  </div>
  <div class="com-content-category-blog__item blog-item">
    <figure class="top item-image">
      <a href="/index.php/anakoinoseis/anakoinose-2.html" title="Ανακοίνωση 2">
        <img src="/images/banners/banner10.jpg" width="996" height="664" loading="lazy">
      </a>
    </figure>
    <div class="item-content">
      <div class="page-header">
        <h2>
          <a href="/index.php/anakoinoseis/anakoinose-2.html"> Ανακοίνωση 2 </a>
        </h2>
      </div>
      <p>Proin pharetra gravida leo condimentum volutpat. Pellentesque luctus odio enim, eu viverra ante scelerisque vel. Fusce pellentesque vitae lacus dignissim ultricies. Suspendisse sed ex nisi. Curabitur varius orci vel elementum feugiat. Donec non neque luctus, suscipit justo id, suscipit neque. Curabitur faucibus ornare laoreet. Ut dapibus accumsan lectus, placerat ornare sem maximus quis.</p>
      <p class="readmore">
        <a class="btn btn-secondary" href="/index.php/anakoinoseis/anakoinose-2.html" aria-label="Περισσότερα: Ανακοίνωση 2">
          <span class="icon-chevron-right" aria-hidden="true"></span> Περισσότερα: Ανακοίνωση 2 </a>
      </p>
    </div>
  </div>
  <div class="com-content-category-blog__item blog-item">
    <figure class="top item-image">
      <a href="/index.php/anakoinoseis/anakoinose-1.html" title="Ανακοίνωση 1">
        <img src="/images/banners/banner12.jpg" width="996" height="664" loading="lazy">
      </a>
    </figure>
    <div class="item-content">
      <div class="page-header">
        <h2>
          <a href="/index.php/anakoinoseis/anakoinose-1.html"> Ανακοίνωση 1 </a>
        </h2>
      </div>
      <div id="test">
        <p>Proin pharetra gravida leo condimentum volutpat. Pellentesque luctus odio enim, eu viverra ante scelerisque vel. Fusce pellentesque vitae lacus dignissim ultricies. Suspendisse sed ex nisi. Curabitur varius orci vel elementum feugiat. Donec non neque luctus, suscipit justo id, suscipit neque. Curabitur faucibus ornare laoreet. Ut dapibus accumsan lectus, placerat ornare sem maximus quis.</p>
        <p class="readmore">
          <a class="btn btn-secondary" href="/index.php/anakoinoseis/anakoinose-1.html" aria-label="Περισσότερα: Ανακοίνωση 1">
            <span class="icon-chevron-right" aria-hidden="true"></span> Περισσότερα: Ανακοίνωση 1 </a>
        </p>
      </div>
    </div>
  </div>
</div>

System information (as much as possible)

Joomla 5.0.2

Additional comments

[brianteeman]

How are you creating the article? When you add the readmore inside a block element then the block element should be closed and then reopened around it. This should be automatic

[niosme]

Hello. Sorry for late reply.

I screen recorded it to understand it better.Putting the link below. https://www.mediafire.com/file/os15j5rady9f03l/screen_recording_article.mov/file

[HarshitaJaiswal5]

I would like to work on this issue.

[rdeutz]

confirmed, it is working when you are inside a p tag. Then it gets closed but it doesn't go up the document tree.