Customise the styling of post submit form text

Can anyone please help me style the current message that pops up post-submit contact form to match what I mocked up in Photoshop with a larger thank you and a smaller message below? The colour would need to be #262f35 to match the rest of the text on the site. Thanks sooo much!

https://www.peterotoole.ie

@niteshifte Can you make "Thank You!" bold in the form post-submit settings? Afterward, I can provide you with custom code to further customize the form post-submit message.

3 minutes ago, Lesum said:

@niteshifte Can you make "Thank You!" bold in the form post-submit settings? Afterward, I can provide you with custom code to further customize the form post-submit message.

 

I actually didn't realise you could do that. Just made thank you bold there! Thanks sam!

@niteshifte Sure, I'm going to submit an entry to the form on your website in order to write the custom code.

@niteshifte You can add this code snippet:

.form-submission-text p {
	font-size: calc((1.1 - 1) * 1.2vw + 1rem) !important;
	color: #262f35 !important;
	font-weight: 400 !important;
}

.form-submission-text strong {
	font-size: 3rem !important;
	color: #262f35 !important;
	line-height: 5rem !important;
}

4 minutes ago, Lesum said:

@niteshifte You can add this code snippet:

.form-submission-text p {
	font-size: calc((1.1 - 1) * 1.2vw + 1rem) !important;
	color: #262f35 !important;
	font-weight: 400 !important;
}

.form-submission-text strong {
	font-size: 3rem !important;
	color: #262f35 !important;
	line-height: 5rem !important;
}

 

That works great Sam, only thing is on mobile the paragraph text is tiny, tiny. Can we increase this up please? thanks!!

@niteshifte Add this code to fix the mobile font issue

@media only screen and (max-width: 767px) {
	.form-submission-text p {
		font-size: calc((1.1 - 1) + 1rem) !important;
	}
}

@niteshifte You can add this code 🙂

@media only screen and (min-width: 768px) {
	.form-wrapper .form-submission-text {
		padding-left: 60px !important;
		padding-right: 60px !important;
	}
}

5 minutes ago, Lesum said:

@niteshifte You can add this code 🙂

@media only screen and (min-width: 768px) {
	.form-wrapper .form-submission-text {
		padding-left: 60px !important;
		padding-right: 60px !important;
	}
}

 

thanks again Sam, you're a genius! Have a great day!

😊 You too!