Adjusting elements for each browser size

Site URL: http://www.openingopus.com

Hi,

I am struggling to adjust the image size and layout for each browser size and would like some help.

Home page (https://www.openingopus.com/english) and contact page banner (https://www.openingopus.com/contact-en): I would like the clef logo to be smaller and on the left in mobile view like how it is for desktop view but it seems to fill up the banner and centre itself. 

Also, the 3 images at the bottom of the homepage (https://www.openingopus.com/english) is side-by-side rather than stacked for tablet view and is breaking up the words oddly. How can I set this up so that the images are stacked and the words do not break up as such?

Thank you in advance!