css load order problem after update to 3.15

Hi.
I faced layout problem on handheld devices after updating news template to 3.15 and I think it may be caused by wrong css loading order(see the screenshot below)

abc.jpg

the override.css also overrides the file mobile.css, small.desktop.css and small.tablet.css which wasn't this way in the previous version.
help needed!!
thanks in advance.

Hello,

We have changed the css order in the last update, because earlier it was impossible to override the mobile CSS files.

I recommend you to improve your CSS code. If you really don't want to do it, please apply the following changes:

1) In the layouts/blocks/head.php file, please add the following code:

Code: Select all

if($this->API->get("css_override", '0')) {
   $this->API->addCSS($this->API->URLtemplate() . '/css/override.css');
}

before the following line:

Code: Select all

$this->API->addCSSRule($this->API->get('css_custom', ''));

2) in the lib/framework/helper.layout.php file, please remove the following code:

Code: Select all

if($this->API->get("css_override", '0')) {
    echo '<link rel="stylesheet" href="'.($this->API->URLtemplate()).'/css/override.css" />' . "\n";
}

Thanks dziudek!
since my current project is almost done I think I'm better use the quicker path!
btw a question crossed my mind that if I want to e.g. set a background image to the footer block (using override.css), and at the same time I want to set that same image with relevant size for handheld devices (using mobile.css), then how could I prevent override.css from overriding background image for mobile devices?
Thank you again.

That's why we have changed the order of the CSS code - in your case the only way is using !important or more complex selector to override the later mobile.css rules.

Got it, thanks!