Editing custom.css to make responsive version

Question

I am supposed to make responsive stylesheet for a website but it is so messed up that they can not make a working copy for me to edit. For that reason I thought of editing

Chrome\User Data\Default\User StyleSheets\custom.css

while browsing their website, adding breakpoints and later save it and add it to their header. It works but the problem is that this stylesheet is not a priority so every rule needs to have !important. Is there a better way? If I could inject link to css after all other stylesheets it would be used as priority. What is your workflow? How would you do this? Ideas?

Answer 1

Rather than edit and try injecting this Chrome stylesheet, I would recommend the following:

1. Create a blank CSS file Add this CSS file to the header of the site as the last CSS file loaded
2. While viewing this site, open Chrome developer tools and open that css file in the "sources" pane.
3. Edit the file here, and copy, paste, and save the changes periodically.

All your edits to this file will take priority over other stylesheets, so no need to make everything !important.