Default media player different in appearance in mobile vs desktop

Hi,
I am using the default media player for wordpress to publish podcasts but am having trouble understanding why they show up differently when I use The Grid to display the latest episodes.

Here is what the page looks like on a desktop in chrome:

The red circle shows TheGrid in a content area. I was able to change some css right in the page in Pro.

Here is what the same page looks like on mobile in chrome:

Do you know the reason for the difference in appearance?

Hello @clefler,

Thanks for writing in!

When I checked your site on my desktop, I am seeing this:

You might be having a caching issue. After doing any site changes or theme/plugin updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

Please let us know how it goes.

It can’t be a caching issue because it always looks the same on my desktop view, even in microsoft edge or other browsers. It’s always like that for new posts and regardless of clearing my cache or even using caching.
What would make it show up in the default way like that for me and not you?
It also happens when I’m logged into wordpress and not logged in.

Hello @clefler,

The grid was loaded inside a content area element. Could you please remove the content area element and use The Grid element directly into the page?

Please create a test page and compare the output of having the Grid displayed inside a content area element and by using the Classic The grid element directly into the page.

Please let us know how it goes.

using the element has no affect vs the content area

Hello @clefler,

Please share the test url so that we can compare and check it in our browser too.
I am still seeing the same video player as with my screenshot above by the way.

Thank you in advance.

this is the live url which I have changed to use the classic “the grid” element

Would you be able to test with different browsers?

Hi There @clefler

Upon testing your issue further, I can confirm there are slightly different versions loading on desktop and mobile as you have mentioned.

Can you also please check this issue further by disabling your child theme first and then you can disable some of your 3rd party plugins as well to see if you’re experiencing a plugin conflict.

In case if you cannot isolate this issue, please provide us with your WordPress login credentials in a secure note to check your issue further.

Thanks!

I have not been able to isolate the issue
I have disabled child theme and each plugin with no success.

Although I should note that the instance of “The Grid” I am using is both on the page in question and the home page with different results:


On the home page it looks normal and on the podcast page it is using the default media player (as viewed on desktop).

Hello @clefler,

Could you also please disable any caching plugin (WP Rocket) or plugin that minifies the JS and CSS files because at the moment, the grid has been displayed differently in those two pages. This could be a caching issue.

Please let us know how it goes.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.