Theme colormag, linken und rechten Rand global verkleinern

Nekokami

Hallo liebe Helfer,

leider bin ich in der Web-Entwicklung bzw. in wordpress nicht sehr bewandert (wird allerdings zum Glück besser), so das ich noch einige Probleme damit habe.
Bei zwei Dingen stosse ich da zur Zeit an meine Grenzen und komme - trotz stundenlanger Foren- und Hilfesuche - nicht weiter.
Bspw. habe ich es mit left und % versucht, was auf grösseren Bildschirmen funktioniert, aber sobald man die Breite des Browsers verkleinert wird das Logo oder auch der Text entsprechend abgeschnitten.

Ich würde gerne den linken und rechten Rand (vom Header bis zum Footer) des Themes colormag verkleinern,
so das generell links und rechts weniger freie Fläche entsteht und das ohne den responsiven Charakter des Themes zu zerstören.
Die zweite Sache ist da ähnlich gelagert, da würde ich gerne die Höhe des Footer verkleinern.

ich habe es bei beiden Problemen schon mit margin und padding versucht ohne auf eine gute Lösung zu kommen.
Aktuell habe ich die Seite als Testumgebung unter diesem Link laufen:
http://at-electronix.de/TS

Kann mir da vielleicht jemand weiterhelfen?
Ich danke euch schon mal für eure Hilfe.

VG
Neko

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SEpp55

Das einfache zuerst!

Deine Custom CSS habe ja schon eine Menge zusätzlicher CSS Anweisungen!

Z.B.: Dein Ghostlogo rutscht links aus dem Browser, wenn man den, wie du schreibst den Browser verkleinert! Das kommt vom ersten Eintrag in deinen Zusätzlichen CSS! Das passt solang die Bildschirmbreite wie du schreibst breit genug ist. Wenn die Hand vom Ghost Logo aus dem Bild verschwindet könntest du mit MediaQueries das verbessern, oder besser die [FONT=Courier New]left:-xx%[/FONT] erst ab c.B.[FONT=Courier New]1220px[/FONT] [FONT=Arial]aktivieren.
Das wäre bereinigt:

Code

@media screen and (min-width: 1220px) {           
#header-logo-image img {
    position: relative;
    top: 0;
    left: -30%;
    height: auto;
    }
}

Ob das Logo überhaupt nach links soll ist Ansichtssache! Ggf. kann das überhaupt weg ;-)

Zitat von Nekokami

ohne den responsiven Charakter des Themes zu zerstören.

Auch das eine Geschmacksfrage. Ich will deine Seite ja nicht umbauen, das sprengt dieses Forum, aber der gesamte Headerbereich ist mit schmäler werdener Anzeigebreite überlegenswert, bis zum 3-zeiligen Hauptmenü. Auch das Header-Text-Widget springt mehr oder weniger lustig hin und her.

Zitat von Nekokami

die Höhe des Footer verkleinern.

Von unten beginnend: da ist in deinen Zusätzlichen CSS ab Zeile 239 eine Anweisung, die derzeit eine Schriftfarbe und einen oberen und einen unteren Abstand als [FONT=Courier New]padding: 10px 0px 10px;[/FONT] vorschreibt mache daraus [FONT=Courier New]padding: 0; [FONT=Arial]und 20 px sind weg.[/FONT][/FONT]
[FONT=Courier New][FONT=Arial]Auch der Eingriff von dir in [FONT=Courier New]#colophon[/FONT] ab Zeile 261 ist aus meiner Sich nicht soooooo gut.[/FONT][/FONT]
Versuche statt dessen den unteren Abstand im Text-Widget zu verkleineren.

Code

#colophon .widget {
    margin-bottom: 0;
}

Dann hat der p-Tag von dir u.a. noch einen größeren bottom-Abstand erhalten, ab der Zeile 75, das ist von dir allerdings global verändert.

Das war jetzt eigentlich schon mehr, als geplant ;):rolleyes:!!!

[/FONT]

[FONT=Arial][/FONT]

Nekokami

Hallo SEpp55,

danke für die Hilfe.
Der Hinweis mit "@Media screen and (min-width: 1220px)" hat geholfen.
Musste tatsächlich erstmal das zusätzliche CSS aufräumen.
So konnte ich den Header entsprechend der verschiedenen Grössen anpassen.
Dazu noch je nach Fenstergrösse

Code

.inner-wrap {
    max-width: 0000px;
}

dazu eingefügt und es passte so wie ich mir das vorgestellt habe.

Nochmals Danke für die Hilfe.
VG
Neko

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Theme colormag, linken und rechten Rand global verkleinern

Jetzt mitmachen!