Displaying Long Lists of Items on Web & Mobile

What are the best UX practices for displaying quick reference long lists such as these in the image below?

This page is used for quickly referencing what a user is allowed to eat on a diet. For this reason I wouldn't want to hide information under accordions because I want to minimize the amount of clicks.

On a larger screen most of my concern is that the amount of items and content is overwhelming. How can I help resolve this? Would creating an almost "infographic" type page be an effective solution?

More importantly how do I display all of this information on Mobile? Especially in a manner that is not overwhelming and easy to quickly reference.