Beiträge von Sailor

Zunächst solltest du deinen Code strukturiert schreiben... dann fällt die sicherlich sofort auf, dass dir das öffnende <div id="bottom"> fehlt.

Zur Problemlösung solltest du in Richtung 'CSS Flexbox' denken.... https://css-tricks.com/snippets/css/a-guide-to-flexbox/

dann könnte dein CSS in etwa so aussehen (ungetestet und nur zum 'spielen'):

#container {
    width: 300px;
    height: 300px;
    background-color: #444;
    display: flex;
    flex-direction: column;
}


#top {
    width: 98%;
    flex: 1;
    background-color: aqua;
}


#bottom {
    margin-top: 20px;
    width: 95%;
    flex: 0;
    background-color: blueviolet;
}

Da du dein Stylesheet als lokale Datei einfügst, musst du entweder den relativen Pfad zur CSS Datei eintragen...
href="css\main.css" - (das solltest du sowieso immer machen, mit den relativen Pfaden kannst du deine Seite problemlos ins Netz stellen, ohne die Pfade anpassen zu müssen!)
oder, wenn du schon absolute Pfade nutzt, im lokalen Umfeld die richtige Syntax...
href="file://E:\Tinka FeWo\Homepage\css\main.css"
nutzen.
Und lasse bitte den abschließenden / in deinem Tag weg... du nutzt HTML 5 und da braucht man dieses nicht... nur bei XHTML wird diese Kennzeichnung benötigt.

Nachtrag:
Der relative Pfad muss natürlich 'css/main.css' lauten! Der Backslash \ funktioniert da nicht!

So sieht es richtig aus... da bin ich etwas ratlos, weil ich mich wohl auch mit shopify nicht auskenne.
Gibt es da die Möglichkeit ein Cache zu leeren... die neuen Daten zu aktualisieren... irgendeine Möglich deinem Shopsystem mitzuteilen, dass es gefälligst die aktuellen Daten einzulesen und auszuliefern hat?

Ist denn hier kein 'Shopify-Auskenner' im Forum?

Dafür steht wieder der falsche Code... mit dem falschen Selektor in deinem CSS..

@media screen and (max-width: 591px) {
 .grid__item #dantendorfer-online-store .grid__item {
  width:50%
 }

Das ist nicht richtig!!!! Der Selektor ' .grid__item #dantendorfer-online-store .grid__item' ist falsch!
es muss '#dantendorfer-online-store .grid__item' heißen!

uuuuhhhh....
Was ist denn da jetzt passiert?
Direkt oberhalb von dem (jetzt richtigen) Code steht folgendes..

.grid__item {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 float:left;
 min-height:1px;
 padding-left:15px;
 vertical-align:top;
 width:10%
}

mit width:10%; zerschießt du dir das ganze Layout - vorher stand da 100%!
Hast du da was verändert?
In deinem Screenshot ist da eine von diesen SASS Anweisungen zu sehen
'@if $mobile-first == true....' auch da sind die 10% eingetragen. Hast du die '0' da weg gemacht?

Da sehe ich jetzt...

@media screen and (max-width: 591px) {
 .grid__item #dantendorfer-online-store .grid__item {
  width:50%
 }
}

Es müsste aber heißen...

@media screen and (max-width: 591px) {
 #dantendorfer-online-store .grid__item {
  width:50%;
 }
}

Da müsstest du mal 'shopify' nachfragen, was die mit ihren Dateien alles so anstellen, bevor die an den Browser angeliefert werden.
In deinen Screeshots weiter oben sind auch nicht CSS konforme Dinge drin, die darauf schließen lassen, dass die einen CSS Präprozessor nutzen (SASS)
https://wiki.selfhtml.org/wiki/CSS/SASS
Und dieses Programm verarbeitet spezielle Anweisungen im CSS Code bevor er ausgeliefert wird. Das könnte eine Ursache sein, warum das bei dir so 'schwierig' ist

Ich bin doch jetzt etwas verwirrt!
An der Stelle in deinem CSS finde ich jetzt...

@media screen and (min-width: 591px) {
 .grid__item #dantendorfer-online-store .grid__item {
  width:50% !important
 }
}

das kann nicht funktionieren!
Das Element '.grid__item #dantendorfer-online-store .grid__item' existiert nicht!
Mit diesem Selektor triffst du eine Element mit der Klasse '.grid__item' in einem Element mit der ID '#dantendorfer-online-store' das sich in einem Element mit der Klasse '.grid__item' befindet.
Du solltest dir die Syntax und die richtige Zusammenstellung der Selektoren nochmal etwas näher anschauen!
https://wiki.selfhtml.org/wiki/CSS/Selektoren
Vergleiche den Code doch bitte mal mit dem, den ich gepostet habe

Sorry, dann stimmt da bei dir irgendetwas anderes nicht... in der Simulation (FireFox DEV) klappt das einwandfrei!

Siehe Screenshot bei 490px Bidschirmbreite.

Ich glaube, da fehlt das Leerzeichen zwischen '#dantendorfer-online-store' und '.grid__item'.

Hmmm... sorry, darauf habe ich beim ausprobieren nicht geachtet.
Aber wenn ich das richtig sehe, hat dein <body> Tag auf dieser Seite eine (hoffentlich) eindeutige ID="dantendorfer-online-store". Vielleicht kann man diese ID nutzen, um die Anweisung nur für diese Seite wirksam zu machen - zusätzlich wäre dann noch eine MediaQuery nötig, sonst würden die Breitenvorgaben bei größeren Bildschirmen überschrieben werden.

@media screen and (max-width: 591px) {
  #dantendorfer-online-store .grid__item {
  width: 50%;
}
}

Dieser Code müsste direkt hinter dem Eintrag platziert werden, den du gerade gefunden hast... also so:

.grid__item {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 float:left;
 min-height:1px;
 padding-left:15px;
 vertical-align:top;
 width:100%
}
@media screen and (max-width: 591px) {
  #dantendorfer-online-store .grid__item {
  width: 50%;
}
}

Und wen das auch nicht klappt, einfach wieder löschen.

Kann dir (auf deinem Rechner) leider nicht beim Suchen helfen... aber schau mal. ob dir das anhängende Bild vielleicht weiter hilft beim Finden:

Ähnliches Problem... allerdings in dem Fall nichts mit Flexbox.
Du hast in deinem Stylesheet 'timber.scss.css' - Zeile 424 ff folgendes stehen:

.grid__item {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 float:left;
 min-height:1px;
 padding-left:15px;
 vertical-align:top;
 width:100%;
}

Das macht dir die einzelnen Elemente in der kleinen Ansicht 100% breit - passt also jeweils nur eines in eine Reihe.
Mach mal aus den 100% ein 50% - dann sollten zwei Elemente in eine Reihe passen.

Bitte!

Das sollte so schwierig nicht sein:
Füge deinem Stylesheet für das Element '.picture-block' einfach ein 'flex-wrap: wrap;' hinzu, damit bricht die Anzeige in diesem Container um, wenn nicht mehr genügend Platz vorhanden ist. In der Desktop Ansicht sind die beiden Inhaltselemente jeweils 50% breit - werden also nebeneinander dargestellt.
In der @media screen and (max-width: 700px) setzt du dann für die Inhaltselemente '.picture-block-left .picture-block-image' und '.picture-block-left .picture-block-wrapper' die Breite jeweils auf 'width: 100%' , dann paasen die nicht mehr nebeneinander und werden untereinander angezeigt.
Zusammengefasst...

.picture-block {
  flex-wrap: wrap;
}
@media screen and (max-width: 700px) {
  .picture-block-left .picture-block-image {
    width: 100%;
  }
  .picture-block-left .picture-block-wrapper {
    width: 100%;
  }
}

Das möglichst in das/die existierenden Stylesheets einarbeiten und das 'display: none;' für den Text natürlich rausnehmen!
Viel Erfolg.

Zitat von basti1012

... Ich dachte das die Css genau wie überall bei ihn auf den Server liegt und er dann die ändern kann.

Doch genau so geht das auch auch - aber WordPress arbeitet mit fertigen Templates (sogenannten Themes) und die werden mehr oder weniger regelmäßig upgedatet und bei diesen Updates werden dann die zum Theme gehörenden Dateien überschrieben. Die Änderungen sind dann futsch :(!
Für dauerhafte Änderungen muss man also eine Methode wählen, die nicht überschrieben wird... s.o.

Zitat von basti1012

Oder geht das nicht wegen den word press oder wie das heißt ?

... genau deswegen.... Änderungen in den Originaldateien (zB style.css) werden beim nächsten Update wieder überschrieben. Das 'zusätzliche CSS' bleibt aber erhalten.

Versuche bitte mal folgendes:

table tr {
  border: 0 !important;
}

Bei WP ins 'zusätzliche CSS' (im Customizer)

WP nutzt für solche 'borderartigen' Striche auch gerne die Pseudoelemente ::before und ::after!
Untersuche doch mal den Code-Bereich der Tabelle mit dem Inspektor (Webentwickler Tools) und schaue, ob da diesbezüglich irgendetwas zu finden ist?
In dem geposteten Code ist, so wie ich das sehen kann, auf jeden Fall nichts drin, was diese Linien erzeugt.

Das sollte dir helfen:

.main-navigation .main-nav ul li:hover > a {
  color: #deine_schrift_farbe;
  background-color: #deine_hintergrund_farbe;
}
.entry-header .entry-title {
  text-align: center;
}

Das solltest du bei WP entweder in die style.css des Child Themes (wenn du eines angelegt hast) oder besser noch in das 'zusätzliche CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS) hineinschreiben.