Aggregated CSS Rending Issues For Mobile Browsers


If the mobile version of your site's CSS files are only partially rendering when CSS is aggregated, but the desktop version is rendering properly, one or more of your CSS files may contain an error. The syntax errors could include, but are not limited, to a missing semicolon, closing brace, or end quote.


To confirm the issue, you can temporarily disable CSS aggregation under the Administration >> Configuration >> Performance page of your Drupal website. Flushing Varnish cache may also be required after the configuration change.

To identify errors in a CSS file it's helpful to use a CSS linter, which should be able to detect such errors more efficiently than a manual perusal. 

CSS linters and validation tools


These types of syntax errors are gracefully ignored by Desktop web browsers where newlines are still present to delimit between CSS rules. However, Drupal's CSS aggregation functionality removes the newlines, resulting in parsing problems starting at the point in the file where the syntax errors occur.

Contact supportStill need assistance? Contact Acquia Support