Why is the content on this webpage on a mobile device with smaller equal 320px width not 100% wide?

Question

I have the issue that on mobile devices with a screen size less/equal 320px the content is not shown 100% wide which you can see in this image:

I have also uploaded the files here: http://files.ailola.com/tmp/v1/privacy.php

I have been able to figure out the following points:

• When I add a width to the < html > tag, e.g. width=150%, I can somehow fix the issue but it breaks then other areas of the site. I assume that it might be related somehow to this line:
• The issue does not happen when I remove the DIV with ID=container. However editing the styles for the container does not bring me to any solution.
• The issue happens only in Chrome browser (My version is 83.0.4103.97 (Official Build) (64-bit) on Mac OS 10.15.4) and iOS (My version is 13.3.1 on iPhone 6s). However in Firefox I cannot reproduce the issue. Maybe it is just Apple-related.

Removing the linked stylesheet does not solve the issue neither.

I just do not figure out the reason. Do you have an idea? Thanks so much for your help.

Answer 1

We have to give width: 100% to header, footer and #container.

The word-break property specifies how words should break when reaching the end of a line.

p {
    word-break: break-word;
}

@media only screen and (max-width: 767px) {
    header, footer, #container {
    width: 100%;
    padding: 0 25px;
    }
}

Answer 2

Set initial-scale=1 inside the meta viewport tag in line number 6

Answer 3

I fixed this with the following:

@media only screen and (max-width: 320px)
#container {
    max-width: inherit;
    width: 100%;
    padding: 0 1em;
    word-break: break-word;
}

The problem is because, inside the content, you have links, those are like an entire word, so the container tend to adapt to the longest word (this issue is present in some languages that have long words or expressions). In those cases, you have to use the property word-break. You can find more info here

EDIT:
Apparently, the value break-word of the property word-break is deprecated. Also you can use the property overflow-wrap with the value break-word, as it is has a similar effect.

Answer 4

There are multiple paragraphs on your page which are overflowing container due to default word wrapping strategy.

To fix the issue apply either word-break or overflow-wrap style to your paragraph:

p {
   ...,
   word-break: break-all;
}

or

p {
   ...,
   overflow-wrap: break-word;
}