Falls es jemanden interessiert, der mit dem Blog-Layout "Aufmacher mit Insert" arbeitet, wird festgestellt haben, dass das Hauptbild im CSS-Layout mit "margin-left / margin-right, -50px" angegeben ist. Auf dem Desktop der Websiteansicht ist das kein Problem, je nach Webdesign-Layout", hingegen im Responsive Design auf Smartphones schon. Das Bild geht über die Bildschirmbreite hinaus. Das bedeutet, man hat ein schwammiges wackeln über den Rand hinaus... Mich persönlich nervt so etwas.
Das Problem habe ich wie folgt behoben:
<style>
@media screen and (max-width: 736px) {
.zpblogartikel img.blogaufmacher.extended {
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.zpblogartikel .bloginsert {
position: relative;
z-index: 2;
background-color: #f4f4f4;
padding: 30px 30px;
margin-right: 10%;
margin-left: 20px;
margin-top: -30px;
margin-bottom: 30px;
}
}
</style>Einfach in die CSS-Einstellungen eintragen. Man kann natürlich mit dem Instert noch etwas spielen im Quellcode. Ich habe es für mich so eingestellt, wie es nach meinem Geschmack passt.
Wenn man mit einem Webdesign-Layout und einer News-Spalte (rechts oder links) arbeitet, z. B. Magazin Responsive, dann sollte man das global ändern; ohne die Umklammerung mit "@media....", sonst geht das Bild über den Rand hinaus in die News-Spalte rein. Nicht schick sowas.
<style>
.zpblogartikel img.blogaufmacher.extended {
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.zpblogartikel .bloginsert {
position: relative;
z-index: 2;
background-color: #f4f4f4;
padding: 30px 30px;
margin-right: 10%;
margin-left: 20px;
margin-top: -30px;
margin-bottom: 30px;
}
</style>Viele Grüße
Mirco
