Создание масштаба моего веб -сайта способным к мобильным устройствам [дублировать] ⇐ CSS

[Anonymous]

Пытаясь масштабировать мой веб -сайт на мобильные устройства, мне не разрешают использовать какие -либо виды фреймворков. Как я бы сделал это, потому что мой текст будет смешиваться с моим изображением, а ссылки на навигации будут испорчены и скользят друг на друга?

Код: Выделить всё

< /code> < /p>


* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
font-family: Camingo, sans-serif;
}

.bg {
/* The image used */
background-image: url("https://jackdijkema.000webhostapp.com/pics/skrrrt.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.AboutMe {
/* The image used */
background-color: white;
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.Hoofdnav {
font-family: Camingo, sans-serif;
font-size: 25px;
width: 100%;
position: absolute;
bottom: 100px;
font-weight: 300;
}

.Hoofdnav li {
display: inline-block;
width: 33.3%;
text-align: center;
}

.Hoofdnav ul {
letter-spacing: 4px;
list-style-type: none;
margin: 0 auto;
width: 30%;
}

.Hoofdnav a {
color: white;
text-decoration: none;
}
.Hoofdnav a:hover {
font-weight: bold;
text-outline: white 2px;
}
.AboutMe h1  {
font-family: Camingo;
text-align: center;
font-size: 20px;
font-weight: 700;
margin-top: 3% ;
text-transform: uppercase;
/*    text-decoration: underline;*/
position:absolute;
margin-left: 25%;
}
.AboutMe p {
font-family: Camingo, sa;
text-align: left;
margin-top: -18% ;
margin-left: 25%;
font-size: 19px;s

}
.AboutMe img {
margin-top: 1.5%;
margin-left: 5%;
}< /code>





Jack Dijkema
[*]


















ABOUT
[img]https://jackdijkema.000webhostapp.com/pics/rsz_150982648_370567113534046_8331947271073836645_n%20(1).jpg[/img]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Pellentesque sit amet hendrerit turpis.
Mauris commodo
est ex, ac convallis tellus feugiat ac.

Praesent sit amet arcu quis elit pulvinar rhoncus.
Proin viverra lacinia ante, at interdum magna posuere eget.
Cras rhoncus a neque ac scelerisque.
Pellentesque habitant morbi tristique senectus.


Jack Dijkema Copyright 2019 -



[list]
[url=index.html]AboutMe[/url][*][url=index.html]Projects[/url][*][url=pdf/Jack%20Dijkema%20CV.pdf]CV[/url]
[/list]

Я также загрузил весь веб -сайт:
https://jackdijkema.000webhostapp.com/ho>

Подробнее здесь: https://stackoverflow.com/questions/554 ... le-devices