Layout is broken in the blog section

Hi there,

Not sure if I fully understand.

What exactly is “broken” about those pages?

I really can’t see how this would be a theme issue though – the content is completely something built by you.

Hi there,

I just want to make sure you did look at my screenshots and saw how the buttons /layout is:
a – perfectly fine when looking at the blog post using the blog post URL
b – broken when you click on the “Blog” menu link.

How can it work on one side and not on the other since this the very same blog post?
How can it go from this good layout to this bad layout when looking at the same content from 2 places of GeneratePress.
—

I’m really not sure where it is coming from but this is completely weird to me.
I did a new test on this page (again please look at the blog section that enables to scroll down across all the posts since everything is fine when looking directly in the posts)

Since the the layout is fine for the grid after the H2 entitled “1. Théorie et pratique du shiatsu de Carola Beresford-Cooke” as you can see here…

… I just duplicated the grid and move it after the H2 entitled “2. Techniques fondamentales du shiatsu Namikoshi du Japan Shiatsu College”.
Look at what happens to the 2 buttons within the grid.

This is the very same grid I duplicated. I check all the settings and they look the same to me. WHy is the layout broken then? Why was it working 2 days ago? I have no idea since I did not change anything (or this is a mistake I just don’t understand).

As you can see, it affects this post but not this one.

I’m not a developper. I just started my blog 2 weeks ago and I happyly selected GeneratePress as my theme, but there mus be something going wrong here.

—

The only thing I did yesterday was adding some text to my blog footer, but again, only one blog post out of the two is affected by the layout issue.

Thank you for your support. Hopefully, you have the knowledge to detect where the issue is coming from.

• This reply was modified 2 years, 9 months ago by masterhealerwp.
• This reply was modified 2 years, 9 months ago by masterhealerwp.

Hi there,

can you check the site in a Private/incognito browser, as it may be a browser caching issue. When i view any of the posts you linked, the layout is the same for all.

@diggeddy thank you so much for your reply.

I tried in Incognito and I even installed a new browser (opera) from scratch to test.

I have the same layout issue on all browsers.

Look at how this image: You can see the layout is only correct for the first book. Why are all other books on the page screwed? All the buttons are off to the right side.

Again, if you go to the Blog option of my top menu and scroll down all the way, you will see that the first post about “sushi” is correct while most of the layout for the grids / buttons are off to the right for the second post about “shiatsu”.

Also, please compare this (blog post) view to that (Blog section) view of the very same content.

Really crossing my fingers for you to find the issue.

On my Mac this is what i see on Chrome, Safari and Firefox.
I tested both URLs in the video:

https://www.screencast.com/t/rsDGpDuHWLi

Can you try connecting to a different network, in case the ISP or the Router has cached the page.

If the issue persists – are you running a CDN on your site ?

Hello,

Thanks a lot for helping me out.

Well, maybe I have not expressed myself clearly enough.
The issue appears only when you go through the Blog option on the top menu.

I recorded this video for you to see with my voice commenting (sorry for the French accent).

Hi @masterhealerwp,

Can you try going to GenerateBlocks > Settings, and click on regenerate CSS files?

If that doesn’t work, can you try clearing all caching mechanisms set in your website?

Lastly, if that doesn’t work, can you try temporarily disabling all caching/optimizations plugins temporarily?

Kindly let us know how it goes.

Hello,

I’m a not a technical guy so I hope I did things right.

I did what you said:

1. GenerateBlocks > Settings > Regenerate CSS.
Result: No change detected.

2. All caching mechanisms?
Not sure what “all” means here but this is what I did:
I have WP Fastest Cache installed. I went there and cleared the cache.
Result here.

3. Then I disables WP Fastest Cache.

Also here is the list of all my plugins installed (they are not many as you can see).

BIG RESULT: On my side, after doing all this and testing the page on a new browser, I see no difference. This issues are still as described on my commented video above.

PS 1: @diggeddy had previously asked if I was using a CDN. I guess no since I do not even know how to install one on my site, which is brand new (about 3 weeks old).

PS 2: I started being very stressed by this situation since I do not see how I could solve this on my side. This is just not rational. Why would the layout be different when looking at the same page through the Blog page as opposed to the actual page of the post?

I see.

I just realized that you’re showing the full content of Posts in your Archive page.

Our CSS system isn’t currently built to work on archive pages in such a way that CSS meant for individual Posts will appear in archive pages.

It only works in such a way that the first post is scanned and the CSS is built based on it.

This will bulk up the size of the CSS that needs to be loaded and would cause performance issues.

What’s occurring is the default behavior, and isn’t a bug.

Our team is currently looking into ways to achieve doing such without affecting performance.

An alternative, would be to add my-align-center to the Container Blocks holding images off center in the Blog page(https://share.getcloudapp.com/2Numq69b), and then add this custom CSS in Appearance > Customize > Additional CSS:

.gb-container.my-align-center {
    text-align: center;
}

Hope this clarifies.