BurnerR
Bot #0384479
- Registriert
- 20 Juli 2013
- Beiträge
- 5.507
Ich mache hier gerade eine eigentlich sehr einfache Seite fertig, will sie aber responsive haben und da hapert es leicht bei mir das robust umzusetzen.
Ich habe ein div - größe ändert sich noch, aber gehen wir von einem quadrat 500px aus - und das liegt, aktuell mit "bottom: 20%" und "right: 25%" so halbrechts im viewport.
Was ich will:
Das div soll immer weiter nach links rücken, bis es horizontal zentriert ist. Dann soll es vertikal zentriert bleiben, bis viewport-width = 500px ist. Dann soll es skalieren um weiter in den viewport zu passen, bis zu einer mindestgröße, nach der nichts mehr passieren soll.
Analog horizontal.
Überall steht, zentrieren geht mit "margin-left: auto; margin-right: auto" aber irgendwie geht das nicht bei mir.
Hier was ich bisher habe:
[src=css]
body {
background-image: url("../Backgrounds/handshake.jpg");
}
.cta-box {
position: absolute;
background: rgba(0, 0, 0, 0.5);
border: 1px solid #000000;
border-radius: 25px;
}
@media screen and (min-width: 750px) and (min-height: 600px) {
.cta-box {
bottom: 20%;
right: 25%;
}
}
@media screen and (min-width: 500px) and (min-height: 500px) {
.cta-box {
width: 500px;
height: 500px;
}
}
@media screen and (min-width: 500px) and (min-height: 500px) and (max-width: 749px) and (max-height: 599px){
.cta-box {
margin-left: auto ;
margin-right: auto ;
}
}[/src]
Wieso geht das nicht?
Ich habe ein div - größe ändert sich noch, aber gehen wir von einem quadrat 500px aus - und das liegt, aktuell mit "bottom: 20%" und "right: 25%" so halbrechts im viewport.
Was ich will:
Das div soll immer weiter nach links rücken, bis es horizontal zentriert ist. Dann soll es vertikal zentriert bleiben, bis viewport-width = 500px ist. Dann soll es skalieren um weiter in den viewport zu passen, bis zu einer mindestgröße, nach der nichts mehr passieren soll.
Analog horizontal.
Überall steht, zentrieren geht mit "margin-left: auto; margin-right: auto" aber irgendwie geht das nicht bei mir.
Hier was ich bisher habe:
[src=css]
body {
background-image: url("../Backgrounds/handshake.jpg");
}
.cta-box {
position: absolute;
background: rgba(0, 0, 0, 0.5);
border: 1px solid #000000;
border-radius: 25px;
}
@media screen and (min-width: 750px) and (min-height: 600px) {
.cta-box {
bottom: 20%;
right: 25%;
}
}
@media screen and (min-width: 500px) and (min-height: 500px) {
.cta-box {
width: 500px;
height: 500px;
}
}
@media screen and (min-width: 500px) and (min-height: 500px) and (max-width: 749px) and (max-height: 599px){
.cta-box {
margin-left: auto ;
margin-right: auto ;
}
}[/src]
Wieso geht das nicht?