Niepoprawne pozycjonowanie ikon na stronie przy mniejszych rozdzielczościach

Question

Dzień dobry.

Mam następujący problem. Tworzę stronę internetową, która musi działać dobrze na różnych rozdzielczościach. Problem jest taki, że nie mogę do tego użyć bootstrapa. Jedynie HTML, CSS, JS/jQuery. Chciałbym aby ikony marek wyglądały cały czas jak na zdjęciu numer 1, a nie przesuwały się i wjeżdżały na siebie jak na zdjęciu numer 2. 

Zdjęcie 1: https://imgur.com/AMAPCEP
Zdjęcie 2: https://imgur.com/a/HUniKrK

Próbowałem już 

html{
min-height:100%;
    min-width:100%;
}
@media only screen and (max-width: 1000px) {
 body .background .foodini-logo img{
        width:15%;
        height:15%;
        margin-top: 10%
        margin-left:12%;
   }
 }

jednak to nie jest żadne rozwiązanie, bo dla każdego logo, właściwie co 100px musiałbym to ustawiać poprawnie. 

A tak wygląda kod obecnie: 
 

html{
   height:100%;
    width:100%;
}
body {
    background: url("../img/bg.png") no-repeat center center fixed;
    background-size: cover;
    background-color:rgb(178,212,238);

}
.
.
.
body .background .foodini-logo{
        margin-top:15%;
        margin-left:17%;

}

body .background a {
        display: inline-block;
        position: absolute;

    }

body .background .haps-logo {
        margin-top: 35%;
        margin-left: 23%;
}

Po prostu chciałbym, aby wszystkie ikony wyglądały cały czas tak, jak na zdjęciu 1. To znaczy nie wjeżdżały na siebie, ani nie zmieniały pozycji względem mapy, bez względu na rozdzielczość monitora. 

Answer 1

Powinieneś raczej pomyśleć o formacie svg  Pewnie znalazła by się jakaś libka do markerów na mapach

Comments

To i tak tylko przykładowe ikony, które w każdej chwili można podmienić. Cały czas największym problemem jest to, że najeżdżają one na siebie i mapę.