How do i make my footer look the same on other devices as on computer? - footer

Question

I am a beginner at programming websites and know some about how HTML and CSS works but not much about jquery and javascript etc. I have managed to create a website and published it. It is not entirely finished but almost everyting works fine on computers, but on other devices (phones) my footer is complete caos and doesnt work the way i want it to. How can i fix this?
here is the index:
<div class="längstned3">
<img src="images/blånere.jpg" style="width:100%; height:300px;">
<div class="neretext">
<p><font color="#A4A4A4" size="2">Bonusprofit.se är en oberoende webbsida som jämför olika spelbolag och deras utbud av olika oddsbonusar. Vi har inte särskilda knutningar till någon/några specifika spelbolag och meningen med vår sida är att du som besökare med hjälp utav oss ska kunna se, jämföra och till sist välja den/de bonusar som passar just dig. Vid frågor eller synpunkter är du alltid välkommen att kontakta oss via mail eller sociala medier.</font></p>
</div>
<footer>
<font size="2" color="#A4A4A4">Spela inte om du är under 18.</font>
</footer>
<div class="fbtw"><p><font color="#BDBDBD" size="3">Sociala medier</font></p><hr><font size="2"><p><a class="twfärg" href="www.twitter.se"><u>Twitter</u></a></p><hr><p><a class="fbfärg" href="www.facebook.se"><u>Facebook</u></a></p></font><hr></div>
<div class="ansvarsfulltspelande"><p><font size="2" color="#A4A4A4">Vi stödjer ansvarsfullt spelande</font></p></div><div class="längstned1"><p> <font color="#BDBDBD">Copyright © 2017. Alla rättigheter reserverade. Bonusprofit.se </font></p></div><div align="center" class="längstned2"><a class="stödlinjen" target="blank" href="https://www.stodlinjen.se/#!/" ><abbr title="besök stödlinjens hemsida"><p><font size="4"><b>18+</b></font></p></abbr></a></div>
and here is the css:
.längstned1 { position: absolute;
bottom: 20px;
left: 790px;}
.längstned2 { position: absolute;
bottom: 245px;
right: 900px;
line-height:40px;
width:40px;
height:40px;
border-style:solid;
border-width:1px;
border-color:#A4A4A4;
border-radius:50%;
background-color:#A4A4A4;}
.längstned3 {
position:relative;
margin-top: 1600px;}
.twitter {
bottom: 10px;
right: 60px;
position:absolute;
border-style: solid;
border-width: 1px;
border-color: white;
border-radius: 50%;
background-color: white;}
.stödlinjen { text-decoration: none !important; color:black;}
.twitter:hover { -moz-box-shadow: 0 0 10px #4d4d4d;
-webkit-box-shadow: 0 0 10px #4d4d4d;
box-shadow: 0 0 10px #ccc;
opacity: 0.99;}
.facebook { background-color:#045FB4;
display:block;
float: right;
width: 55px;
height: 55px;
margin-top: -57px;
margin-right: 120px;
border-style: solid;
border-width: 1px;
border-color: white;
border-radius: 50%;
font-style: arial;
line-height: 55px;}
.facebook:hover {-moz-box-shadow: 0 0 15px #4d4d4d;
-webkit-box-shadow: 0 0 15px #4d4d4d;
box-shadow: 0 0 15px #ccc;
opacity: 0.99;}
.ansvarsfulltspelande {position: absolute;
bottom: 255px;
right: 960px; }
.länknere { color: white;}
.twfärg { color: white; }
.fbfärg { color: white;}
.kontaktaoss {color:#D8D8D8;}
.neretext {
width: 500px;
position: absolute;
bottom: 100px;
left: 30px;}
.fbtw { position: absolute;
bottom: 100px;
right: 150px;}
.footer {
color: black;
position: absolute;
bottom: 253px;
right:710px;
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
font-variant: caps;
font-weight: normal;
z-index: 5;}

Answer 1

Could you create a JSFiddle. The font element in the footer isn't supported in HTML5 w3 font tag, use css classes and IDs or and in-line style attribute
(<p style="color:blue">text<p>).
The two divs inside the footer for organization could go inside the footer.
<footer>// acts like a container div for the end of your page
<div> //These divs organize space inside of your footer.
</div>
<div>
</div>
</footer