[Support request] Blog Archive styling conflict with Elementor

[Gary]

Hi,

I’ve noticed on 2 domains that blog archive templates from elementor do not display correctly. The issue for me seems to be confined to domains where I am using vertical navigation. It was working previously and the issue has happened since recent Elementor update and possibly a GP update.

I’ve spoken to Elementor about this who say the issue is to do with the theme file. They have given some CSS in the meantime but even that does not really fix the display problem completely. Apparently users of the Astra theme are experiencing a similar problem.

Can you look into this and advise? I can send you the last reply from Elementor if needed. Any single post templates seem to be fine, it’s just blog archive templates. I’ve tried all the ones from Elementor and even one by LaunchParty and the issue is the same. Effectively they all display with huge margins / borders between each blog article and images are tiny, nothing like the preview for the template.

Thanks
Gary

[David]

Hi Gary.

i can see this CSS being applied by Elementor on your blog page:

.elementor-866 .elementor-element.elementor-element-2b707b48 > .elementor-container {
    max-width: 698px;
}

Check the Elementor Section to see if the Layout > Content Width is set to 698px. If you increase this then the two columns sort themselves out.

[Gary]

Hi David,

I’m not sure what you mean by the elementor section as the blog archive template has a few sections. The only one I can see that has Layout>Content Width has an option for Boxed or Full Width only.

I’ve added the following CSS given to me by Elementor:

selector .elementor-post {
width: auto;
}

This seems to have solved the issue with the huge columns but for whatever reason I have now lost the text that should show above the blog posts despite it being in the template.

I would also like to understand why this suddenly happened. It was working fine. I would like to understand if it was a GP update or Elementor update that broke this. The fact that Astra users are also complaining makes me think this is down to Elementor but they seem to be saying GP will need to fix via an update.

Gary

[Tom]

Do you have a screenshot of what it should look like vs how it looks like now? I’m currently just seeing three columns of posts on your blog page.

[Michal]

I am experiencing the same issue on my website.

Please look at the screenshots.

https://ibb.co/mfYZCe

I found this https://retailnet.pl/wp-content/themes/generatepress/css/unsemantic-grid.min.css?ver=2.1.3 causing this error. In this view you have 33.3% when you change this value to 100% is ok.

https://ibb.co/mFqaJK

Could you look at this issue? Archive pages not working as expected using Elementor Archive Posts element on it.

[Tom]

Can you link me to that page?

[Gary]

Hi Tom,

Here is a link to another domain with the same problem.

https://www.pastelpetportraits.co.uk/blog/

It only has one blog article but you can see how tiny the image is. The blog archive should more like it does on my sites that have horizontal navigation like this one:

https://www.northamptondogwalker.co.uk/blog/

Interestingly they seem to be reporting on forums that this issue has been fixed by a new Elementor update. I’ve updated tonight and still see the issue so I’m guessing it fixed it for Astra users and not GP users.

Can you update?

Gary

[David]

Hi Gary,

can you go to Customiser > Layout > Blog and check if you have Columns enabled. If so disable that.

[Gary]

Hi David,

Yes that seems to have fixed it! Interestingly I don’t get the blog heading on that page but it does show on category pages like this:

https://www.pastelpetportraits.co.uk/category/dog-art/

Don’t know if that’s a GeneratePress issue or an Elementor problem but again before the recent updates it was working fine.

Thanks
Gary

[David]

Great, glad that worked. We’ll keep people posted 🙂

The Blog doesn’t actually have a Title hence probably why the Element is empty. Is this after an Elementor update?

[trung]

Hi David.

I am having the same problem. Thanks for your guidance.

But I still use GeneratePress Blog layout (with 3 column) for one category (picture 1), and use Elementor Blog layout for another category (picture 2 – error).

How can I exclude the category use Elementor Blog layout from settings of Generate Blog layout with 3 columns.

Please support me. Hope to receive your response.

[trung]

Hi David.

I think I have found the answer for my problem in this topic.

Thank you.

[David]

Glad to hear you found the solution

[Author]

Posts