Header line breaks go wrong on desktop and mobile

Hello there,

I am just testing my site on desktop, tablet and mobile and realised that my gallery page looks great on desktop but goes a bit wrong on desktop and mobile!

There are two problems:

1/ The titles under the images line break in a weird way. It needs to say ‘Kat & Nick’s Wedding’ on one line for example and then the rest of the info can follow on the next lines underneath.

2/ Where the title has run into more lines, you can see on the right, it is pulling the images down too so they aren’t laid out in nice equal columns (how it looks for desktop).

I know I need to create a media query CSS but no idea how to create it in terms of what it should specify and how. And also where does it go? On the page CSS or on the main Appearance>Customizer> Additional CSS?

Would massively appreciate your help with this!

I have looked in various forums with no success.

Thank you in advance,

Victoria

The page I need help with: [log in to see the link]