How to make an existing website mobile friendly?

Essentially, the process would be the same as making a mobile-first that expands as the screen size does using relative sizes and media queries. Instead of growing elements you would shrink them, min-widths usually become max-width, and so on. However, in practice this can sometimes become quite challenging, which is why it's usually good practice to go mobile-first. In my experience, taking a desktop-only to mobile-friendly will usually begin with adjusting the existing styling (make sure to make a copy of your stylesheets first) to look good on small screens and then building them out with the needed changes and previous values that make it look the desired way on larger screens. Of course, a well-structured page that uses relative sizes will make the process easier, so sometimes it's not necessary, especially if you only have to change a few things.

I would suggest setting 3 or 4 media screens eg (max-width:680px), (max-width:980px), (max-width:1260px) and your original CSS. From there make sure your main page elements are contained within a wrapper as you can then easily adjust the canvas size for each screen size.

From there it is just about going through your class' and id's and begin changing the CSS within the media queries to adapt to the screen size.