Category Blog weird behaviour

ptwd

I'm seeing strange behaviour on Category Blog pages, and haven't found anything in the forum here that might explain it. There are three things happening.

[1] In 2-column mode (sequence goes across) There are 2 specific articles that always extend across both columns. They are not the last articles to be listed, nor the last articles on the page; this may happen part-way down the page, then the next row of 2 article previews displays normally (2 across). I've triple-checked the settings on the articles and menu items for these, and compared them to other articles; all use the same (global) options. However, when I test that page with 3 columns, those article previews display fine. When I look at the HTML of the front end, it seems that the DIV wrapping the first of the two is different from that of other article previews; and the second one (that should appear as the second in that row) seems to be structured as a child of the wrapping DIV.

[2] Usually in the second-last Cat Blog page, the links that normally show below the article previews on that page, instead appear in an extra, narrow column at the right end of the last row (but still within the normal width of the row). In other words, it looks like a widget that is floated at the end of the last row of article previews.

[3] If the number of articles to be listed on the Cat Blog page(s) leaves an empty column box, the size of the box extends across both columns (in 2-col mode) or is divided into two equal columns (in 3-col mode). Note that in the T3 framework, the box size of each Cat Blog item is always the same: 1 column by 1 row.

I really hope we can fix these issues or I'll have to go back to T3 again and I'd rather use the more up-to-date framework. Thanks in advance.

Ninja

ptwd
Hi
Can you fix the super user login in first post. The submitted login is not working and the site is in Offline mode.
The first issue might be due to html error in Article content or different height of contents in the articles.

About the 2 and 3 point i need the URL of pages and screenshot to understand the issue you are facing.

Regards

ptwd

Hi pankaj, thanks for getting back to me. Apologies for the user login problem. I've edited the login info and this now works (note 3 p's in the username). The site is also online now (although you could use the same login to access the front end if it wasn't).

[1] Thx for the suggestion about HTML error. I'll check it. Any difference in height is not significant, and other article previews don't have a problem if they're off by a line or two.

I'll attach screenshots. All examples are in 2-column mode.

[2] To see the same, click Articles in top menu:
scrn-1 - Correct blog cat layout for 2-col, first page of blog list.
scrn-2 - The articles that are always full width in 2-col mode (I'll check the HTML).
scrn-3 - The bottom links appearing as a floated side widget, even in 2-col mode.

[3] To see the same, click Zodiac in top menu:
scrn-4 - The "odd" article at the end that displays full width.

I would provide links but I would rather not put them in a public forum. If that would help, pls let me know how I can hide the URLs. Thx.

Ninja

ptwd
Hi
The login are still invalid kindly try them and fix.
For the Menu i found only zodiac menu item view as no URL shared and its showing fine : http://prntscr.com/133hdzy

ptwd

Hi pankaj. You have to use the exact login URL I gave you or you won't be able to login. It looks like you weren't using the URL I provided.

Yes, the first several previews for Zodiac do display fine, but if you go to the bottom, you'll see that the last one (the 13th article; odd number) extends across both columns, when it should be contained within only the left-hand column.

Please reread what I wrote about it. It's a bit complicated and my description will help you duplicate and understand the problem. Please try again. 🙂

Ninja

ptwd

ptwd lease reread what I wrote about it.

Hi I already read the issue and about it shared the suggestion to check the content html error.
For the Menu you have not shared any URL in any post, in edit fields also you added only admin URL.
For bottom view on Zodiac menu i can see it normal http://prntscr.com/135bjw2

Kindly check and share details of page on which the issue is present.

ptwd

Hi pankaj. The URL I referred to is what I entered when I created this post; it asks for the "site url" and "site admin account" and password. Obviously I don't want to put this information in the post comments or it would be an invitation to get hacked. If you use the Site URL I entered at the start of the post, you will be able to login. If you still don't know what I'm referring to, then kindly let me know how I can get this information to you privately (invisible to all other readers of this post).

I had started to develop this website in the T3 Purity III template, but thought I would try to transfer it to T4 since it seemed to be the more up-to-date framework with some nice new features. The HTML in the T4 articles is the same as in the T3 site articles.

I went to the W3C HTML checker and submitted one of the T4 articles that always expands across 2 columns (e.g. Sun and Moon Cycles). With only one exception, the ONLY errors or warnings found were in the template's own coding. The only exception was a non-standard tag that works with a Glossary extension I use.

So, I edited the article and removed that tag, cleared my cache, and checked the Cat Blog page again. No change - that article still extends across 2 columns when it should be confined to only one column width. If it was an HTML problem in my article, I should have problems in the T3 site as well, which I don't. In the T3 site the articles in the 2-column Cat Blog page all display properly.

Please keep in mind that the coding structure of those 2 articles in T4 is significantly different than for the other articles displaying on that same page. I've gone over all options in the problem articles and compared them to those of the correct articles and everything is the same; yet they are structured differently on the Cat Blog layout page.

There's also the odd 13th article at the end of the Zodiac Cat Blog page. In the T4 site, it extends across both columns at the end of the list, whereas in the T3 site it remains in the left column and the right column space is empty, as it should be.

Please see the document attached that shows a series of screenshots comparing the Cat Blog layout problems in both T4 and the T3 Purity III site.

Ninja

ptwd
Hi
Did you check my screenshot? In last post and read my reply first. I requested the site URL on which you have the issue simply but you have not shared it not a single time. Hope it make sense.
Further on specific menu I have not found the problem as in screenshot I shared. It appear there is issue with specific browser and device.

Kindly let me know which device size and browser you have the problem and only focus on the topic issue.

About other issue kindly make a separate post with issue subject and details of you have the problems.

Thank you for your understanding.

ptwd

Pankaj, your previous screenshot shows one of the problems I'm talking about, so it is not displaying normally. Please see new screenshotimages, showing T3 and T4 side-by-side along with some extra comments, and you will see that the last, odd-numbered article should stay only in one column, not span across all columns.

I seem to be having difficulty getting you to understand the problems I'm having, but I'll try one more time.

In answer to your last post, I am on a desktop, Windows 10, widescreen (16 x 9). I work mostly in Firefox but I also checked the problems in both Chrome and Edge and they show exactly the same problems.

The Zodiac blog preview page (as you obviously know or you wouldn't have taken the screenshot) is:
https://personaltouchwebdesign.com/zodiac

The Articles blog preview pages showing problems are:
https://personaltouchwebdesign.com/articles?start=24 (More Articles becomes part of the last row)
https://personaltouchwebdesign.com/articles?start=36 (2 Articles span 2 columns each instead of one)

I have looked more closely at the HTML (via the browser debugger) and discovered that where there are problems with the display, there is a </div> missing for one of the columns. With no </div> to close the column div, the next column or div becomes a child of the un-ended column. The next available div becomes the closing for that column, but that means the row isn't ended either, so subsequent rows become children of that un-ended row. This happens where the 2 articles always span 2 columns (instead of 1 each).

This also happens when the More Articles links is squeezed into a box next to the second column in the last row (#3 in my original post). I know you asked me to start a separate post, but all of these problems are related and I believe caused by the same bug.

The problem with the final (odd) Zodiac article spans both columns, instead of "staying in its lane" in one column only, seems to be due to the empty column code being entirely missing.

I realize all this gets complicated, so I am uploading some more files. One is a screenshot of a table that shows the code side-by-side between correct T4 code and the T4 code where the problems occur. The table shows that when the </div> for a column is missing, it throws the rest of the page off. Please check the actual pages and you will see what I'm saying.

The other uploaded files are better versions of the screenshots I uploaded in my last reply, but these have been divided into 3 sections. I have also added screenshots for where the More Articles links appear at the right end of the preview row.

I trust this will finally fully clarify the problems I'm having. If not, then I honestly don't know how else I could possibly explain it. The login account is still available, if you would like to try again, but as I said before, you must use the login link I provided or it will redirect you to the front page.

Ninja

ptwd
Hi
You do not need to compare 2 different templates as both has own style and design structure.
So there is no sense to make it issue if you say this template show content like this why not another has same.

Lets talk about the issue only. On this page i have this view : https://personaltouchwebdesign.com/zodiac
http://prntscr.com/13gkjuy

On this page https://personaltouchwebdesign.com/articles?start=24
This view : http://prntscr.com/13gkm9u

On this page : https://personaltouchwebdesign.com/articles?start=36
http://prntscr.com/13gkmop

The only issue i got is on last page top part : http://prntscr.com/13gkomd
This is also because of the HTML error on your article content see this : http://prntscr.com/13gkqpp
You have opening DIV in intro text that not closing before readmore and breaking the site view.
Unpublish that article error gone http://prntscr.com/13gks67

Hope its clear now.

ptwd

I see that the </div> had been after the Readmore which caused the problem (and which the W3C HTML checker missed). I looked at the article previewed immediately before where the More Articles links are displaced to the previous row, and found the same problem which was fixed when I moved the </div> so thank you for spotting that.

Lets talk about the issue only. On this page i have this view : https://personaltouchwebdesign.com/zodiac
http://prntscr.com/13gkjuy

Your screenshot of the zodiac page shows only the first 4 previews in your screenshot, and the problem is at the bottom of that page where the last (odd-numbered) preview stretches across both columns. I have discribed this issue since my original post; I've given you screenshots of it, shown what it should look like, and you have even given me screenshots of it. And I provided the T3 vs T4 only to show you what it should look like, since I didn't feel you understood the problem.

And now I see that because the article Cat Blog listing has an odd number of previews (since Sun and Moon Cycles was taken out of the list), the last (odd) preview now stretches across both columns there too. Since more articles will be added over time, there will inevitably be an odd number of articles some of the time, so the last article will inevitably break the layout some of the time.

The issue is: the last (odd-numbered) article should not be spanning both columns. It makes no sense to display it that way, and frankly it looks terrible and ridiculous. If this is 'just how T4 does it' (so to speak) then it means the user has no control over how the Cat Blog pages display at the end of the previews. My impression is that the purpose of building T4 was largely to give the user an easier way to have control over their layout, but so far I'm not seeing any way to avoid this problem other than to micromanage the number of articles on the website, which shouldn't be necessary.

Surely, there must be a way to avoid this problem?

Ninja

Hi
You should just focus on the support topic first.
There is no issue in the view as shared already its only your point of view that its not what you want. This is not something you can force it as bug.
All row use the full width to show 2 columns view. In the last column you have 1 item left when you add an article and there are 2 item in 1 row it auto use that width.
If you want to force the last column as 50% width here is code for custom css

.com-content-category-blog.blog .items-row:last-child {width:50%}