Different font colour on website and desktop

Hi, I'd be grateful for help from anyone who knows a solution to this:

I'd like to a have different colour for the title of my page(s) on desktop browser to the one on the mobile because the image underneath impacts readability. Is there code to do this?

You can see pictured, the title "Catalogue" in colour #424855 shows up well against a white background but not when the image behind is formatted for mobile. On mobile breakpoints, I'd prefer the font colour to #fffff. 

Can you help? 

 https://kangaroo-oriole-jxjt.squarespace.com/

Password: RichardPantcheffWebsite

@spantchux Hi! Do you want to change the text color for all pages or just the page you mentioned in the screenshot?

@spantchux If it's only for the catalogue page, you can add this code under Website > Pages > Website Tools > Custom CSS. If you simply add the section ID of a page in the above code, the heading color will change to #ffffff.

@media screen and (max-width: 767px) {	
	section[data-section-id="65b3b7506b04b27d83371cfe"] {
		h1, h1 span {
			color: #ffffff !important;
		}
	}
}

If you want to change the text color of all headings in the first section of every page to #ffffff, add this code:

@media screen and (max-width: 767px) {	
	#sections:first-child h1, #sections:first-child h1 span {
		color: #fff !important;
	}
}

Thanks so much for your response @Lesum  It doesn't seem to work... I'm not sure if I've done it right.

@spantchux I'm seeing an error in the code you added. Remove '}' from line 25.

Now it says there's a missing closing bracket...

@spantchux I can't see your entire code. There must be an error. Try adding a } on line 13

I don't think that's the issue. I tried adding the closing bracket line 13...

Is there anyway you could take a look at the whole code?

@spantchux Can you share a screenshot of the entire code?

@spantchux Remove the closing bracket } from line 28 and add a closing bracket } on line 13.

THANK YOU! Very helpful.

@Lesum Sorry to bother you again... The code is working but it's also applied to a couple of other pages which I didn't want it to. 
I thought by adding the section code, it was specific to certain pages.

@spantchux You added additional tag "section h1" with the code I provided which is affecting all the h1 header.

Ahh I see. So how do I alter the code so I can make it page specific, not site wide for all h1 header?

10 minutes ago, spantchux said:

Ahh I see. So how do I alter the code so I can make it page specific, not site wide for all h1 header?

Please refer to the first block of code in the solution I shared. For each page where you want to change the text color, add the page's section ID after a comma.

Apologies, I thought thats what I had done! I used the code pictured which is the one which uses section ids to denote where to apply the code.