CSS Problem

Hallo zusammen,

ich bin jetzt schon Tage auf der Suche nach einer Lösung, leider ohne Erfolg.

Hier mein Problem:

Meine Frau braucht endlich mal eine Webseite für Ihr Gewerbe (Hochzeits- und Eventfloristik), also hab ich kurzerhand losgelegt. Nutze WP 4.0 und das Theme Twenty Fourteen, habe ein Childtheme erstellt und einige Anpassungen an der neuen style.css vorgenommen.

Da mir das Theme zu breit erschien, hab ich es mittels

.page {
    max-width: 75%;
}

auf 75% Breite reduziert. Hat auch wunderbar funktioniert. Da die Rubrik "Aktionen und Angebote" mittelfristig mehr werden wird, hab ich mir hier mit der Beitragsseite beholfen um so direkt jedes Angebot als Beitrag ins Untermenü hinzufügen zu können. Wenn ich jetzt den ersten Beitrag aufrufe, verbreitert sich die ganze Seite wieder. Ich werd noch wahnsinnig!

hier die Seite http://bluetenzauber-neuhofen.de

Kann mir da jemand helfen?

Besten Dank im Voraus
L.

ich hab jetzt den IE, Firefox, Chrome und Safari getestet. Startseite hat 75% Breite, sobald ich auf "Aktionen und Angebote" klicke, hat sie Seite nahezu wieder 100% Breite.

Zitat von maxe

Bei mir auch nicht, evtl. Browser-Cache ;-)

FF Strg+F5 hab ich auch schon versucht!

Ok, du hast anscheinend einen recht großen Bildschirm. Wenn ich das Browserfenster über den Rand hinausziehe, wird die Seite auch größer. (sollte auch nicht sein) Ich brauche eine feste Breite.

Anyway, die Startseite sieht so aus:

rufe ich die Aktionsseite auf sieht es so aus:

das passiert erst seit dem ich eine Beitragsseite definiert habe.

Zitat von maxe

so wie in deinem Screenshot sehen aber alle Seiten bei dir aus.
Vielleicht liegt es daran, dass page keine Class ist, sondern eine ID ;-)

[COLOR=#FF0000]#[/COLOR]page {
max-width: 75%;
}

YES SIR! Super! Besten Dank! Jetzt stimmt alles!

ich wollte Die Seite einfach in ihrer Breite beschränken. Habs gerade auf nem großen Monitor getestet, du hast Recht! Sieht nicth so toll aus! Wenn ich dann noch den Browser über den zweiten Bilrschirm ziehe .... wie kann ich verhindern, dass das Theme dann "mitwandert"? Wie kann ich die komplette Breite permanent beschränken, unabhängig der Bildschirmgröße?

aktuell sieht die style.css im childtheme so aus:

/* =Theme customization starts here
-------------------------------------------------------------- */


#page {
    max-width: 75%;
}


/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */


.content-area {
    padding-top: 48px;
}


.hentry {
    margin: 0 auto 48px;
    max-width: 672px;
}


.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
    margin: 0 auto;
    max-width: 672px;
}


.page-content {
    margin-bottom: 48px;
}


.entry-meta {
    color: #888;
    display: none;
    font-size: 12px;
    line-height: 18px;
}

Hab mal etwas rumprobiert und die max-with auf 1024px gesetzt. Glaube so geht´s ganz gut!

Zitat von maxe

Auf welche Weite willst du denn beschränken und warum?

der Content hat sich einfach etwas verloren, wenn es zu breit war, und mit einer unnötigen zweiten Seitenleiste (Facebook/Twitter/Google+) als Lückenfüller wollte ich mir nicht behelfen.

Zitat von maxe

da hilft nur eins: mehr content :lol:

...die Antwort hab ich schon vermutet! ;)

Sie steht ja ganz am Anfang, von daher wird sich das schon noch füllen. Aber es gibt nunmal keine zweite Chance für den ersten Eindruck, darum soll die Seite auch mit noch wenig Content schon was hermachen.

Zitat von maxe

noch ein Hinweis ... die Datenschutzerklärung sollte als eigenständiger Punkt außerhalb des Impressums stehen.

Danke für den Hinweis! Ich versuche morgen mal die Datenschutzerklärung klein am unteren linken Rand zu "verstecken" (noch keine Ahnung wie!). Als eigener Menüpunkt is aber irgendwie doof.

Zitat von maxe

bei .site-header musst du die max-width auch noch ändern, sieht man, wenn man mal über den Banner hinaus nach unten scrollt.

Du meinst den hier?

}


.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
    margin: 0 auto;
    max-width: 672px;
}

oder hier?

/**
 * 4.0 Header
 * -----------------------------------------------------------------------------
 */


/* Ensure that there is no gap between the header and
     the admin bar for WordPress versions before 3.8. */
#wpadminbar {
    min-height: 32px;
}


#site-header {
    position: relative;
    z-index: 3;
}


.site-header {
    background-color: #000;
    max-width: 1260px;
    position: relative;
    width: 100%;
    z-index: 4;
}


.header-main {
    min-height: 48px;
    padding: 0 10px;
}


.site-title {
    float: left;
    font-size: 18px;
    font-weight: 700;
    line-height: 48px;
    margin: 0;


    /* Nav-toggle width + search-toggle width - gutter = 86px */
    max-width: -webkit-calc(100% - 86px);
    max-width:         calc(100% - 86px);
}


.site-title a,
.site-title a:hover {
    color: #fff;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Search in the header */


.search-toggle {
    background-color: #24890d;
    cursor: pointer;
    float: right;
    height: 48px;
    margin-right: 38px;
    text-align: center;
    width: 48px;
}


.search-toggle:hover,
.search-toggle.active {
    background-color: #41a62a;
}


.search-toggle:before {
    color: #fff;
    content: "\f400";
    font-size: 20px;
    margin-top: 14px;
}


.search-toggle .screen-reader-text {
    left: 5px; /* Avoid a horizontal scrollbar when the site has a long menu */
}


.search-box-wrapper {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    position: absolute;
    top: 48px;
    right: 0;
    width: 100%;
    z-index: 2;
}


.search-box {
    background-color: #41a62a;
    padding: 12px;
}


.search-box .search-field {
    background-color: #fff;
    border: 0;
    float: right;
    font-size: 16px;
    padding: 2px 2px 3px 6px;
    width: 100%;
}