Twenty Fourteen Breite des Inhaltsbereich anpassen. Die Vergrößerung des Inhaltsbereichs fällt hier beim iPad und Safari Browser gering aus (etwa 20px), weil ansonsten für „Seiten“, Attribute: Template/“Seite mit voller Breite“ seitlich stehende Bilder abgeschnitten bzw. außerhalb des konformen Bereichs angezeigt werden. Am PC Monitor für Google Crome, Cromium, Firefox und Internet Explorer läge die Konforme Darstellung etwa 600 bis 700px.
Für Standardtemplate und Beiträge ist ohnehin nur kleiner Unterschied möglich.
Des Großenteils Änderung bringt (noch) weniger, insbesondere schon mit kleiner tüftelei an – margin-right: 29.04761904%; – ist die Responsion des Themes kaputt.
Folgendes habe ich im Child-Theme abgespeichert:
/*Vergrößerung des Inhaltsbereichs im Allgemeinen von 474 auf 524px.*/
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 524px;
}
iPad Safari-Browser: Bei einem größeren Wert (<505px) bei „max-width“, werden seitlich stehende Bilder zum Seitenrand gedrückt, abgeschnitten bzw. außerhalb des konformen Bereichs angezeigt. Evtl. für ein paar solcherart Seiten mit obigen Codes extra über Seiten ID zu normaler Seitenbreite zu konfigurieren wären. Siehe zu IDs Hinweis … ⇔
/*Dann den Inhaltsbereichs von Beispielseite wieder normal zu 474px*/
.page-id-123 .site-content .entry-header,
.page-id-123 .site-content .entry-content,
.page-id-123 .site-content .entry-summary,
.page-id-123 .site-content .entry-meta,
.page-id-123 .page-content {
margin: 0 auto;
max-width: 474px;
}
Durch max-width: 100%; die gesamte Seitenbreite verwenden? Gestalterisch angewendet z. B. mit dem Plug-in Columns für zwei oder mehr Spalten Text und Überlegtem arrangieren der Bilder eine Idee.
Für Beiträge heißt das anstatt site dann entry.
/*Inhaltsbereich für Beitrag Colums max-width: 100%; */
.post-10373 .entry-content .entry-header,
.post-10373 .entry-content .entry-content,
.post-10373 .entry-content .entry-summary,
.post-10373 .entry-content .entry-meta,
.post-10373 .entry-content {
margin: 0 auto;
max-width: 100%;
}
Die Website auf großen Bildschirmen zentrieren:
Dieser Website (Translate) u. a.:
.site {
margin: 0 auto;
}