responsive styling issues after 3rd party plugin update

Hello-

We recently updated one of our plugins (other developer), and one of it's two views stopped re-sizing for different screen sizes. The plugin changed it's structure a little, but there are still just two main views, but now have some partial views called within them.

The problem seems to be the Side-2 class is not using the alternate stylesheets, like 480.css, etc..and keeps using the 220px definition from the main stylesheet, even when viewed with a smaller device...at least, that's what it SEEMS like...I don't know for sure. I've tried many things but cannot get it to look like it did before.

Here's a normal page on my site which behaves correctly:
http://www.myfootshop.com/shoe-insoles-and-arch-supports


This is the view from the plugin which is still responsive:
http://www.myfootshop.com/article/arthritis-of-the-foot-and-ankle


And here is the plugin view that is no longer responsive:
http://www.myfootshop.com/articles/List/2

Can you see a reason for this problem?

Thanks!

Hi Joster,

By looking at your page I cannot be sure what might be the issue. It looks like the breakpoint css files are not loaded, but cannot be sure as the css is bundled. Would ti be possible to remove the CSS bundling from your admin so that we can have a look at the css files being loaded and their order of including. This will help us a lot.

Thanks in advance.

I have disabled CSS bundling.
Thanks for looking at it!

Hi joster,

Thanks for your cooperation.

By inspecting your code I can see that the /themes/alfresco/content/css/styles.css is included twice and the second one is after all the media queries files. Thus the styles from the styles.css override the ones from the media queries and that is why the responsive functionality is not working.

You should remove the second include of the /themes/alfresco/content/css/styles.css and the page will behave as it should.

Just remove the one that is bold

<link href="/Themes/Alfresco/Content/css/styles.css" rel="stylesheet" type="text/css">
<link href="/Themes/Alfresco/Content/css/980.css" rel="stylesheet" type="text/css">
<link href="/Themes/Alfresco/Content/css/768.css" rel="stylesheet" type="text/css">
<link href="/Themes/Alfresco/Content/css/480.css" rel="stylesheet" type="text/css">
<link href="/Themes/Alfresco/Content/css/tables.css" rel="stylesheet" type="text/css">
<link href="/themes/alfresco/content/css/styles.css" rel="stylesheet" type="text/css">

This last line is not present on your other pages and that is why the work as expected.

As I see that this is a view from other plugin, make sure that the file is not included again in that view. The Alfresco theme css files are present and included in the Themes/Views/Alfresco/Shared/Head.cshtml view.

Hope that helps.

Please let me know how it goes.

Oh, WOW....I should have disabled CSS bundling minification..maybe I would have also seen the problem!

Thanks a million!