2

Recently I tried enabling CSS merge inside System->Configuration->Developer

But this is breaking complete UI in front end. ** It seems like CSS os having issues & I have to make CSS error free**.

Can anyone list out what points have to check in CSS to avoid such issues.

  • straight away we can tell you what is the issue. first confirm its caused by css, not the js merging. secondly, move the site to local and remove the css one by one and then merge and seein which part its getting stucked. But i didnt get how the site breaks on merging css. The possiblity is more for js merging. – Shyam Krishna Sreekumar Nov 2 '16 at 12:44
  • I enabled CSS merge only JS merge i am keeping disabled. Seems it's caused by CSS only. – Akhil Gupta Nov 2 '16 at 12:54
2

Copy the content of your CSS and copy it into the W3C validator: https://jigsaw.w3.org/css-validator/

It will list the errors and once you've fixed them, merge CSS will come back normal

| improve this answer | |
  • 1
    Thanks..!! Found some 200+ errors , 500+ warnings. will forward to UI developer to fix all :P – Akhil Gupta Nov 2 '16 at 13:00
  • Any JS validator also there? – Akhil Gupta Nov 2 '16 at 13:03
  • @AkhilGupta I don't think there is some as there is a lot of JS frameworks and their syntax is different. – Raphael at Digital Pianism Nov 2 '16 at 13:09
2

when you are doing css merged then please take care of this things.

Your Css file does not has syntax error.

If your css has syntax error then It will not effect css after that error.

for example you have miss ; or } or you have put an extra } these are the cause the css error and your css file break and after that error rest of the css code will not execute

| improve this answer | |
0

Check if any of your combined CSS files have used "import" method. This can cause design breaking as imported CSS will not work when you combine them. For example:

@import url("style.css")

Instead of using import, you can create one separate CSS file and write down all the imported CSS files code in that separate CSS file.

Or, you can include the file using "link" HTML tag, like this:

<link rel="style.css" href="style.css" type="text/css">

In Magento, you can include CSS files from app/design/frontend/YOUR_PACKAGE/YOUR_THEME/layout/local.xml

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.