Ort des Header Bildes in Twenty Twelve

bei meinem WordPress Theme wurde das Header-Bild optisch im Body-Bereich angezeigt. Es sollte eigentlich neben „vierzweidrei.de“ und „Ganzheitlich über Medien reden“ stehen.

Falsch plaziertes Header Image

Dank einger Hilfe konnte ich den CSS Code zusammen bekommen, dass das Bild an der richtigen Stelle sitzt und sich auf Smartphones (und anderen kleinen Bildschirmen) an die richtige Stelle verschiebt.

/* Header */
.site-header {
	padding: 24px 0;
	padding: 1.714285714rem 0;
	position: relative; /* zeile hinzugefuegt */
}
/*hinzugefuegt anfang */
.site-header hgroup {
	padding-left: 140px; /* Logobreite + etwa 40px Abstand */
}
.site-header > a {
	position: absolute;
	top: 0;
	left: 0;
}

/*Abstaende header-image*/
.header-image {
	margin-top: 10px;
	margin-top: 0.625rem;
}
@media screen and (max-width: 599px) {
	.site-header {
		display: flex;
		flex-direction: column;
		float: none;
	}
	.site-header hgroup {
		order: 2;
		float: none;
		padding: 0;
	}
	.site-header .main-navigation {
		order: 3;
	}
	.site-header > a {
		order: 1;
		position: relative;
		text-align: center;
		margin: 0 auto 12px auto;
		/* 12px (dritter Wert) = Abstand nach unten zum Titel */
	}
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.