Make a header and picture with text responsive?

You haven't added any code so iam not sure what is wrong but my guess is that your font size is constant so i recommend that you use responsive font-size if thats the problem link

Needed knowledge

The CSS line-height property is responsible for this text effect. You can find more here CSS line-height

If you want to be in control of what resolution your browser uses in a given style, check out this tutorial on CSS media-query

How to do it?

1. Add a breakpoint for phone resolution using media-query

2. Add a property line-height to your header

3. Reload the page in the browser and reduce the window size. Now the text should be displayed without overlapping.

   @media only screen and (max-width: 768px) {
       /* For mobile phones: */
       .header-class-name {
           width: 100%;
   }