I created a little page: [Link](http://skeptar.bplaced.net/Startseite/)
Here is the code:

```css
*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: rgb(25, 81, 118);
}

.text {
    width: 70%;
    text-align: justify;
    font-size: 32px;
    color: white;
    margin-right: auto;
    margin-left: auto;
    margin-top: 200px;
}
nav{
    width: 100%;    
    background-color: white;
}

ul{
    font-size: 0px;
}
```

```html
<!DOCTYPE html>
<html>
    <head>
        <link href="css.css" type="text/css" rel="stylesheet">
        <meta charset="utf-8"> 
    </head>
    <body>

        <div class="text"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
    </body>
</html>
```

If i view this side with my laptop it looks normal (i use Mozilla). Now i opened the page with my smartphone and it looks like this.
![Picture](https://i.stack.imgur.com/i56fS.jpg)

At the picture the number 1 is perfect, but not the picture 2. The text field should be 70% of the screen. Maybe someone of you have an idea.