How can I prevent header splitting on mobile screens?

Store Design
1

have an issue with mobile phone page. some phones our header gets split. how do i stop this happening (resize font) or can it be clever and resize pending screen width? see image

Stitchcombefood_0-1672062210764.png
Stitchcombefood_0-1672062210764.png425×213 76.8 KB

Thanks for any help

2

@Stitchcombefood Can you share your store url?

3

@Stitchcombefood - can you please share your site URL?

4

@Stitchcombefood

Hello,

@media only screen and (max-width: 480px) {
.header__heading .h2 {
	font-size: 1.5rem;
}
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

Like This

oscprofessional_0-1672062618445.png
oscprofessional_0-1672062618445.png384×472 138 KB

5

Thanks a bunch. easy fix