Some CSS not working in frontend

Question

This question has probably been asked a billion times, but I haven't found the exact same issue.

I'm working on a M2 (v2.2.1) shop. Recently I accidentally removed the .htaccess file from pub/static. I've put it back but since then, not all of my theme's CSS loads. Actually, I'm not even sure if that has caused the issue, or perhaps something else is messed up (too).

I'm using this script to deploy:

rm -Rf pub/static/*
rm -Rf var/view_preprocessed/*
rm -Rf var/cache/*
rm -Rf var/page_cache/*

php bin/magento maintenance:enable
php bin/magento setup:static-content:deploy -f en_US
php bin/magento setup:static-content:deploy -f nl_NL
php bin/magento cache:clean
php bin/magento maintenance:disable

I've tried switching to developer mode, back to production. I've deployed several times, with and without the explicit deletion of static files.

I've run the reindexer, flushed caches. Flushed Redis cache, I've ran the setup upgrade & di compile scripts. I've removed caches & css files from the magento backoffice. I've tried adjusting the app/etc/di.xml file to switch the developerMaterialization strategy from Symlink to Copy. And back.

All of the above in almost every thinkable order.

The CSS file (with correct css code IS included in the page source. The file exists, I can access it via browser or download it via wget from another server, however some of the CSS rules are not applied. When I copy such rules to my browser developer console the rules do take effect, so it's not a matter of a silly css typo or missing file.

I've reverted about a dozen of git commits trying to find any relevant changes, but so far: nothing.

Obviously I lack the knowledge of what is actually happening. At this stage I feel like I'm just making things worse.

Any thoughts?

Answer 1

There is nothing wrong with your deployment or how you are compiling the files, it's a CSS issue as the CSS you mention is wrapped in a media query.

If you shrink the browser you will see the CSS you mention apply:

If you search your CSS for @media only screen and (max-width: 479px) you will see your media query has no closing tag.