Q:

HTML/CSS Mobile compatibility

A few days ago I started learning HTML / CSS in my spare time and programming my own test website. At some point I encountered a problem when I tried to visit my website on my smartphone. Here Here you can see that the Picture is shifted above the border.
Everything works fine on the desktop, but as you can see, it has moved on the mobile device. I tried several methods, but none of them resolved the problem. Since I just started, I have no other ideas.
I do not want to post all my code, so the problem is here
thank you in advance 

A:

Your problem is not only related to mobile I'm afraid.
That is what happens when you float, the container element loses its layout. To fix it you just need to give it back applying for example an overflow: hidden.
But I suppose you want to still have the img on the right of the Personal Data, for that you have to put the image inside the same container, applying the overflow: hidden.
Just like this:

/*SCHRIFTART*/

@font-face {
 font-family: 'Levenim MT';
 font-style: normal;
 font-weight: normal;
 src: local('Levenim MT'), url('ufonts.com_levenim-mt.woff') format('woff');
}


/*ALLGEMEIN*/


* {
 margin: 0;
 padding: 0;


}

/* CONTENT */

#PB-Bild {
    float: right;
    margin-top: 6px;
    margin-right:7.5px;
}

#Information {
overflow:hidden;
    height: 30%;
    width: 98%;
    border: 7px outset grey;
    background-color:whitesmoke;
    font-family: 'Arial Rounded MT';
    padding-left: 5px;
    color:darkblue;
}

.was {
    font-size: 150%;
    font-weight:900;
}
p.was::first-letter {
    color:brown;
    font-size:160%;
}

.was {
    font-family:Arial;
    color: black;
}

.uText {
    font-family:Arial;
    background-color:ivory;
    font-size:120%;
}
<div id="Information">
<img id="PB-Bild" src="https://fakeimg.pl/300x350">
    <p class="was">Name:</p>
    Domenic Malz <br>
    <p class="was">Alter:</p>
    16 Jahre <br>
    <p class="was">Geboren am:</p>
    29.04.2002  <br>
    <p class="was">Wohnort:</p>
    Berlin <br>
    <p class="was">E-Mail</p>
    postfach@domenicmalz.de <br>
</div>

