Help me fix my title section’s CSS to look good across all devices

I need help positioning the title section (title, subtitle row, and the three circular buttons) on my website (https://quizmenot.com) on desktop and mobile. After clicking on a school from the dropdown list, the next page’s purple title section can look weird on different mobile devices. Please help me make it look good on all devices (desktop and the different mobile devices listed in Chrome's dropdown device menu). The circles should be in the middle of the dividing line and there should be an even vertical spacing between the text.

Chrome shows it looks good on Galaxy S20, but I have a Galaxy S20+ and it still looks a bit off.

I'm using Angular 7 & inline CSS3 btw.

Pastebin HTML of header section: https://pastebin.com/nDBjPnMf