unwanted behavior of header and headline size on mobile

Hi there,
I designed a page and now also installed a child theme as put forward.
my problem is as follows: the top of my landing page (i guess this is called the header) behaves very strange on mobile devices
my letter sizes are
normal: 16px
h6: 20px
h5: 25px
h4: 30px
h3: 40px
h2: 50px
h1: 60px
on mobile portrait, h1 is pretty much same size as normal text, which makes the whole design look weird
on mobile landsacpe it is i guess 60px and whole words just get cut off.

picture examples are in private content

The solution I am looking for is:
can I via css globally reduce the size of h1-h6 by a certain percentage so that the headlines are still displayed larger but not as fat as set in general styling?
Can this also be done for mobile in landscape so that my website looks somewhat normal?
can it also be arranged that th size of the backgound image gets reduced the same percentage so that the astronaut you can see there doesn’t fill the whole screen on mobile devices?

since I am new in website building and teaching most of this to myself please design any answer detailed. for example when proposing to add some css, please name the detailed path to the css window i shall use. for example i do not understand the difference between adding quick css and making changes to the child theme my_custom.css as suggested in the tutorial.

also please note that i use wp in german, any suggestions can also be made in german if easier

thanks in advance,

diego

• This topic was modified 4 years, 10 months ago by diego.