Beiträge von Sailor56

OK... Danke fürs Feedback - und bitte weiter im Auge behalten, denn mitunter zeigen sich Probleme auch erst wenn die Displaygröße sich ändert (PC, Tablet, Smartphone)

Versuche bitte mal folgendes im zusätzlichen CSS des Customizers.

.container {
  flex-direction: row-reverse;
}
#secondary {
  padding-right: 40px;
  margin-left: 0px;
}

Der Spalt zwischen dem Sidebar und Hauptteil lässt sich durch das 'padding-right:....px;' verändern
Bitte auf unerwünschte Nebenwirkungen prüfen!

Zum grundlegenden Problem muss ich sagen, dass Bilder, die in einem Container als Hintergrundbild eingefügt sind immer etwas Problematisch sind, denn sie belegen keinen Raum/Platz innerhalb des Containers - sind eben nur Hintergrund.
Bilder haben aber auch Proportionen (deine 2400x1300 px) zB... und wenn diese Proportionen nicht mit dem Proportionen des Containers übereinstimmen - schlimmer noch, wenn diese Proportionen des Containers sich ändern (bei unterschiedlichen Bildschirmgrößen), dann passiert genau das, was du feststellst. Das Bild wandert im Rahmen und wird teilweise abgeschnitten.
Mit meinem kleinen Code-Schnippsel habe ich als ersten Versuch etwas zu verbessern das Bild erst in der Mitte des äußeren Containers zu fixieren... deswegen 'center center' für horizontale und vertikale Zentrierung.
https://www.w3schools.com/cssref/pr_background-position.asp
Wenn das schon ausreichen ist, um dein Problem zu lösen - OK... wenn nicht, müsste und kann man da noch etwas nachbessern. Je nach dem, wie sich das Bild nach der Änderung verhält.
Was bewirkt das '!important'?
Im CSS haben einige Formatierungen eine höhere Wirkung als andere - in deinem Fall sind die Formatierungen, die geändert werden sollen, in einem so genannten 'inline-style' eingefügt. Also in dem entsprechenden HTML-Tag mit 'style="...." ' eingefügt. Dieses sind die dominantesten Formatierungen und überschreiben alle anderen Formate. Der einzige Weg, um das trotzdem zu ändern, ist eben diese Markierung mit '!important'. Würde den Rahmen sprengen, um das hier weiter zu erläutern, aber eine kurzer Einstie dazu ist hier...
https://www.css-hack.de/CSS+allgemein/%21+important

Teste bitte, ob dich der CSS Code...

#masthead {
  background-position: center center !important;
}

im zusätzlichen CSS des Customizers deinem Wunsch näher bringt.

Sieht so aus, als hättest du auf deinem Server eine (neue) PHP Version aktiviert, die nicht kompatibel ist mit der PHP Version, mit der dein Code geschrieben wurde.

In deinem CSS, welches zur Zeit online ist, ist für dieses Element ein Margin von -40 0 0 angegeben.
Überschreibe das mal im zusätzlichen CCS durch

.elementor-3770 .elementor-element.elementor-element-e9a7f04 > .elementor-widget-container {
  margin: 0 0 0 0 !important;
}

Das ist die 'border' aus der Zeile 621ff aus der style.css.
Sollte sich mit

button.menu-toggle {
  border: 0;
}

ausblenden lassen. Aber was da bei einer größeren Displaybreite 'blau' wird kann ich nicht erkenne, denn da sollte dieser button komplett unsichtbar sein.

#logo {
  padding-top: 0px;
  padding-bottom: 0px;
}
.footer-widget {
  padding-top: 5px;
  padding-bottom: 5px;
}
#mc4wp_form_widget-3 {
  margin-bottom: 5px
}

mit den px-Werten noch ein bisschen spielen, bis es passt.

Mit einem Link zur Seite sicherlich zu beantworten - ohne Link gibt es nur Rätsel raten.

Zitat von moellerchen

Wie kann ich mich hier im Forum bei dir bedanken?

Ein 'Danke' ist da schon ausreichend und das hast du ja schon gemacht - also alles gut :).
So sehr kenne ich mich leider mit deinem Theme und WooComm nicht aus, ich vermute, dass diese Texte in deiner Datenbank gespeichert sind. Also wenn du da in den Einstellungen deines Themes und auch bei WooComm nichts findest, wie man das editieren kann, dann musst du es in der Datenbank ändern. Dafür gibt es aber Tools, das ermöglichen - spontan fällte mir da aber nur 'Better Search Replace' ein.

Wie gesagt... der Code muss in das 'zusätzliche CSS' und das findest du unter 'Design' -> 'Customizer' -> 'zusätzliches CSS' ... und in diesem zusätzlichen CSS solltest du mittels Copy und Paste diesen Code ganz an das Ende reinkopieren.

Vielleicht hilft dir folgender CSS Code im Customizer unter 'zusätzliches CSS'...

.sidebar .widget a, .sidebar .widget a:visited {
  color: #ffffff;
}

Mit einem Link zu der Seite könnte man dir vielleicht weiter helfen.... nur mit dem Screenshot ist kaum etwas sinnvolles zur Problemlösung zu sagen.
Hast du schon versucht die in/um diesem Bereich liegenden Elemente mit 'display: none;' auszublenden?

Ich würde keine feste Breite (in px) vorgeben - lieber etwa proportionales (in %).
Vielleicht so etwas...

.container {
   width: 95%;
}

in das zusätzliche CSS des Customizers übernehmen.

Lösche doch mal bei dem Code aus dem zusätzlichen CSS die MediaQuery...
als statt

@media screen and (min-width: 80em) {
 .jgd-column-1 .entry-content > :not(.alignfull):not(.alignwide):not(.gallery):not(.tiled-gallery):not(.more-images-link):not(.entry-attachment-image):not(.slider-button-panel) {
      max-width: 100%;
    }
}

nur das Format:

.jgd-column-1 .entry-content > :not(.alignfull):not(.alignwide):not(.gallery):not(.tiled-gallery):not(.more-images-link):not(.entry-attachment-image):not(.slider-button-panel) {
      max-width: 100%;
    }

Versuche doch mal, ob dich der folgende CSS Code im zusätzlichen CSS des Customizers weiter bringt?

@media screen and (max-width: 1080px) {
  .page-title {
    height: calc(100vw / 2.5);
   }
}

bei deinem Problem mit der Breite der Tabelle könnte dir das helfen...

@media screen and (min-width: 80em) {
   .jgd-column-1 .entry-content > :not(.alignfull):not(.alignwide):not(.gallery):not(.tiled-gallery):not(.more-images-link):not(.entry-attachment-image):not(.slider-button-panel) {
      max-width: 100%;
    }
}

Es sollte weiterhin das background-image des Containers 'class="site-header" ' sein... und Hintergrundbilder lassen sich nicht mit margin oder padding positionieren. Lediglich das Element, in dem dieses Hintergrundbild eingebettet ist, könnte man damit beeinflussen.
Hintergrundbilder werden mit 'background-position:' oder auch mit 'background-position-x:' und 'background-position-y:' dorthin gebracht, wo man sie hin haben will. In deinem Fall könntest du mal mit...

.site-header {
    background-position-x: 5px;
    background-position-y: 0px;
}

versuchen zum Erfolg zu kommen.

... und mache vielleicht das Bild, je nach Displaybreite etwas kleiner...

@media screen and (max-width: 768px) {
 .site-header {
    background-position: left top;
    background-size: 67%;
}
@media screen and (max-width: 630px) {
 .site-header {
    background-size: 85%;
} 
@media screen and (max-width: 550px) {
 .site-header {
    background-size: 100%;
}

Versuche mal das:

.site-header {
    background-size: 100%;
    background-repeat: no-repeat;
}