I was creating website pages by using the Editable template but suddenly my editable template background changes to black and drop components box size also changed, not able to find how it got affected. Please suggest.
Check the browser console if there are any errors related to coral objects not found in core.js. If yes then restart the instance or rebuild the client libraries from the below URL:
If after this also the same issue persists, check for error in the AEM error.log file.
To better understand your situation, we will need to debug your existing environment...
Can you please provide us with:
By any chance did you customized the responsiveGrid ?
I suspect there are some custom CSS added to the Page Policy which is hampering this. You can try clearing the cache once or try in Incognito window.
* Do you see the same behavior, when you close all currently opened tabs & windows, clear browser cache & cookies, open a new browser in Incognito mode?
* Do you see any errors in the Console tab of Developer Tools?
* Did you install any custom/third-party bundle/package, after which you started seeing this issue? Try uninstalling/disabling & removing them, perform the below step and then verify whether the issue still exists:
Try recompiling JSPs, invalidating clientlibs cache & rebuilding clientlibs via File System. 
Hope it helps !!