Why is my heading styles fine in desktop view but in mobile view it is bunched together and you can not read it?

Can you share your website URL?

My guess is that you have the line height for the heading font set to a value below 1em, anything below 1em means that you will get overlap when there is more than one line. A value of between 1.2em and 1.6em is typically good.

Go to Design -> Site Styles -> Fonts -> Headings