Breite des Inhaltsbereich;
Gesamte Website centrieren

Twenty Fourteen Breite des Inhaltsbereich anpassen
von toni-wittmann – und Hallo!. den Fotos.

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 CSS Stylesheed Editor 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 …  ⇔

/*Inhaltsbereichs Beispielseite, normal 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 bemerkenswerte Idee.

Die Website auf großen Bildschirmen centrieren:

  • Micha’s Blog
    Es wird der erste Wert für den Rand von margin 0; auf margin 0 auto; geändert.

Betreffend Code-Block: Dashboard/Design/Editor, Stylesheets (unten), Stylesheet (style.css), am Anfang der Datei:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 border: 0;
 font-family: inherit;
 font-size: 100%;
 font-style: inherit;
 font-weight: inherit;
 margin: 0 auto;
 outline: 0;
 padding: 0;
 vertical-align: baseline;
 }