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.
