Close

responsive styling issues after 3rd party plugin update

joster
3 years ago
#10140 Quote
Avatar
  • 127
PM
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!



Stefan
3 years ago
#10145 Quote
Avatar
  • Moderator
  • 157
PM
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.
Best Regards,

Stefan Hristov
Nop-Templates.com
joster
3 years ago
#10147 Quote
Avatar
  • 127
PM
I have disabled CSS bundling.
Thanks for looking at it!
Stefan
3 years ago
#10149 Quote
Avatar
  • Moderator
  • 157
PM
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.
Best Regards,

Stefan Hristov
Nop-Templates.com
joster
3 years ago
#10150 Quote
Avatar
  • 127
PM
Oh, WOW....I should have disabled CSS bundling minification..maybe I would have also seen the problem!

Thanks a million!