Position "read-next" and its consequences

webmaster omroepmuseum

In a number of our webpages we use the "read-more"-feature. In Category Blog display such pages are shown with their content up to the "read-more"-label. If you push the "read-more"-button, then you get the whole page. Up to now everything normal.
But from the "read-more"-position onwards the text is shown with an indent of 25% of the page width (indent on the left side).
Upon inspection of the HTML-code of such a page, I was able to find the piece of code that causes this behaviour.

<div class="container">
<div class="bottom-article-info">
<div class="article-inner">
<div class="row">
<div class="col-12 col-md-3 order-2 order-md-1 mt-5 mt-md-0">
<div class="siderbar-article">
</div>
</div>
<div class="col-12 col-md-9 order-1 order-md-2">
<div itemprop="articleBody" class="article-body">_

In particular the classes col-md-3 and col-md-9 cause this behaviour. The first one taking 3 of the 12 pieces of a row (25%) and the second one taking the remaining 75%.
I do NOT want this behaviour. But I haven't found where this is caused and how I can prevent this.
In the end I solved the issue by redefining the classes col-md-3 and col-md-9. I know this is BAD BEHAVIOUR!

Note: when I looked at the page (before applying the changes above), I also saw that at "read-more"-position in the text, the css-position "read-next" is introduced. Probably there is a relation between the introduction of this position and the indenting behaviour.
I added a picture of it.

Can anyone tell me if there is another (non-destructive) way in order to get rid of this indent-behaviour?

Kind greetings,

Hendrik

dominic

Hi webmaster omroepmuseum,
You can use the following code to make the content full-width:

.item-page.layout-2 .bottom-article-info {
    max-width: 100%;
}

Also, you can go to the /templates/ja_purity_iv/html/com_content/article/layout-2.php file to customize the layout.

webmaster omroepmuseum

Hello! I added the code to the custom code in "After <body>" of the template. As part of the <style>-settings. I also changed the layout of the article with the "Read more/Read next" in to "layout-2".
But no success!

Am I doing something wrong?

Kind greetings and thanks!

Hendrik

dominic

Hi webmaster omroepmuseum,
Could you send me the admin account for further checking?

webmaster omroepmuseum

Hello,

before doing so, I wanted to mention that I already added following code:

 .item-page.layout-default.no-sidebar .bottom-article-info, .item-page.layout-default.no-sidebar .full-image
   {
   max-width: 100%;
   }

Note that I use the default layout. But I tried with layout-1 and layout-2 and although I saw changes, I couldn't avoid the "Read-next" effect (the indenting of the text).
The code I added has following effect: the part of the article before "Read-next" is now full width (100%). But the part after "Read-next" is indented (by 25% of the width).

Kind greetings,

Hendrik

dominic

Hi webmaster omroepmuseum,
If you are using the default layout, you can open the /templates/ja_purity_iv/html/com_content/article/default.php file,

You can remove from lines 201 to 211 if you don't want to use the sidebar section.

And find the line 213, replace the following code:

<div class="col-12 col-md-9 order-1 order-md-2">

With the new code:
<div class="col-12 col-md-12 order-1 order-md-2">

webmaster omroepmuseum

Dominic,

thanks for this reply! I think that this gives the solution indeed and I will try. I will keep you in touch.

Kind greetings,

Hendrik

webmaster omroepmuseum

Dominic,

it does the job indeed. Thanks!

Kind greetings,

Hendrik