制作 header 和带有文本响应的图片？

Question

When I adjust my browser to the size of a cell phone to check everything, the sentences on the image overlap. In addition, the elements in the header also shift. How can I prevent this?

https://i.stack.imgur.com/kMIPP.jpg

Answer 1

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

Answer 2

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%; }