Title: Shipyard responsiv funktioniert nicht richtig Last modified: 21. Juli 2016 --- # Shipyard responsiv funktioniert nicht richtig * Gelöst [Julia Jochim](https://de.wordpress.org/support/users/julia-jochim/) * (@julia-jochim) * [vor 10 Jahren, 2 Monaten](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/) * Hallo! Ich hab mit diesem Theme ein Problem: Das Theme ist zwar responsiv, aber auf dem Mobiltelefon werden die Sidebars versaut: kann man hier sehen auf dem Telefon: [http://Www.winterlager-hamburg.com](http://Www.winterlager-hamburg.com). Die Sidebars werden seitlich neben den Hauptcontent gequetscht und sehen unmöglich aus. Idealerweise sollten sie nach unten rutschen unter den Hauptteil. Weiß jemand, wie man das macht? Ansicht von 15 Antworten – 16 bis 30 (von insgesamt 31) [←](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/?output_format=md) [1](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/?output_format=md) 2 [3](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/3/?output_format=md) [→](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/3/?output_format=md) * [Flower33](https://de.wordpress.org/support/users/flower33/) * (@flower33) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31971) * Hallo! Geh mal zu deinem Plugin „Simple Custom CSS“ und setze bei * ``` /* MOBILE */@media screen and (max-width:767px) ``` * ein Leerzeichen zwischen `/* MOBILE */` und `@media`. Danach bitte aktualisieren. Eventuell liegt es nur daran, dass die Media-Query nicht funktioniert. * Ansonsten: Im Unterschied zu deiner damaligen Frage scheint aktuell ein Child- Theme aktiviert zu sein, richtig? Dann sollte eigentlich kein Custom-CSS-Plugin mehr eingesetzt werden, sondern die Änderungen gegenüber dem Parent-Theme kommen ín die CSS-Datei des Child-Themes. * Aber probiere jetzt erst mal, ob es eventuell nur an dem fehlenden Leerzeichen liegt. * Themenersteller [Julia Jochim](https://de.wordpress.org/support/users/julia-jochim/) * (@julia-jochim) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31974) * Hallo! * Ja, ich benutze inzwischen ein Chidl Theme, aber wie gesagt, es funktioniert weder im Child noch im Original-Theme. Die Anweisungen für Mobile habe ich aus dem Original-Theme ins Child-Theme-CSS kopiert, das hat wie gesagt eine Weile funktioniert, jetzt eben nicht mehr. Am Leerzeichen liegt es nicht, das ist drin… * [Flower33](https://de.wordpress.org/support/users/flower33/) * (@flower33) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31975) * > Die Anweisungen für Mobile habe ich aus dem Original-Theme ins Child-Theme- > CSS kopiert * Ob du dich da nicht irrst? Denn in der style.css des Child-Themes befindet sich aktuell keine Media-Query für mobile Endgeräte, das sehe ich mit den Entwickler- Tools. Die Media-Query hast du damals in das Plugin „Simple Custom CSS“ kopiert und dort liegt sie auch jetzt noch, wie man im Quelltext deiner Seite sehen kann, aber dort sieht es auch so aus, wie ich schon sagte, dass da ein Leerzeichen fehlt. * > Am Leerzeichen liegt es nicht, das ist drin… * Hmm, ich sehe da in deinem Quelltext im CSS-Code des Simple-Custom-CSS-Plugins kein Leerzeichen? [http://www.bilder-upload.eu/show.php?file=540e04-1474292378.jpg](http://www.bilder-upload.eu/show.php?file=540e04-1474292378.jpg) - Diese Antwort wurde vor 10 Jahren von [Flower33](https://de.wordpress.org/support/users/flower33/) geändert. * Themenersteller [Julia Jochim](https://de.wordpress.org/support/users/julia-jochim/) * (@julia-jochim) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31977) * Hallo, sorry, da haben wir uns wohl missverstanden. Ich dachte, ich müsste das in Simple CSS machen. Mir wird in Simple CSS ein Leerzeichen angezeigt. [URL =http://www.bilder-upload.eu/show.php?file=d3c495-1474293289.png][IMG]http:// www.bilder-upload.eu/thumb/d3c495-1474293289.png[/IMG][/URL] * Tatsache ist ja aber, wennn ich das Theme wechsle und zurück in das Original- Shipyard-Theme gehe, funktioniert es auch nicht. Woran kann das liegen? Irgendein Plugin was der Sace in die Quere kommt? * Themenersteller [Julia Jochim](https://de.wordpress.org/support/users/julia-jochim/) * (@julia-jochim) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31978) * Sorry, das mit dem Upload hat nicht geklappt… [http://www.bilder-upload.eu/show.php?file=861e64-1474293632.png](http://www.bilder-upload.eu/show.php?file=861e64-1474293632.png) * [Flower33](https://de.wordpress.org/support/users/flower33/) * (@flower33) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31980) * So eine Schei3e, hatte dir grade trotz Zeitdrucks eine längere Antwort geschrieben, die durch einen falschen Tastendruck ins Nirwana ging. 🙁 Melde mich später am Abend wieder. * Nachtrag: Eine Sache noch auf die Schnelle: Füge mal am Ende der mobile query im Simple CSS noch eine abschließende geschweifte Klammer ein, die scheint mir da zu fehlen. Die mobile query wurde ja am Anfang richtig durch eine geschweifte Klammer geöffnet. - Diese Antwort wurde vor 10 Jahren von [Flower33](https://de.wordpress.org/support/users/flower33/) geändert. Grund: Nachtrag - Diese Antwort wurde vor 10 Jahren von [Flower33](https://de.wordpress.org/support/users/flower33/) geändert. * Themenersteller [Julia Jochim](https://de.wordpress.org/support/users/julia-jochim/) * (@julia-jochim) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31984) * Die ist drin – das ende sieht so aus: * /* SIDEBAR */ #sidebar {width:100%; margin:0; padding:10px 0 0; float:left;}. widget {margin:0 0 10px;} * /* FOOTER */ #footer {padding:5px 0 0; border:0;} .footer-right, .footer-left{ width:100%; margin:5px 0 0; float:left;} } * [Flower33](https://de.wordpress.org/support/users/flower33/) * (@flower33) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31985) * So, da bin ich wieder. 🙂 Nimm mal im Plugin Simple CSS die Angaben für #content und #sidebar heraus (70%, 25%), die überschreiben nämlich die schon im Parent- Theme vorgesehenen mobilen Werte, wie man im Browser mit „Element untersuchen“ sehen kann. * Themenersteller [Julia Jochim](https://de.wordpress.org/support/users/julia-jochim/) * (@julia-jochim) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31989) * Damit funktioniert es! * Allerdings ist nun in der Version für große Bildschirme die Seitenleiste sehr breit – das war der Hintergrund dessen, dass ich das ins Simple CSS reingeschrieben hatte, weil ich die Seitenleiste schmaler haben wollte. Gibt es da einen Weg, dass das trotzdem geht? * [Flower33](https://de.wordpress.org/support/users/flower33/) * (@flower33) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31991) * Ja klar, einfach die gewünschten Werte für `#content` und `#sidebar` in die style. css des Child-Themes packen, dafür ist sie ja da! * Ich habe den Eindruck, dass du die Funktionsweise noch nicht so richtig verstanden hast: Da du ein Child-Theme angelegt hast, brauchst du das Plugin Simple CSS nicht mehr bzw. solltest es sogar nicht mehr einsetzen, weil es das Ganze unübersichtlich macht bzw. zu Fehlern führen kann. * Übertrage einfach die jetzigen Angaben aus Simple CSS sauber in die style.css des Child-Themes, lösche Doppeltes oder Unnötiges, und deaktiviere das CSS-Plugin. Und gib einfach Bescheid, falls du diesbezüglich noch Fragen hast! * Themenersteller [Julia Jochim](https://de.wordpress.org/support/users/julia-jochim/) * (@julia-jochim) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31992) * Also, wenn ich die sidebar und content-Angaben in die style.css reinschreibe, dann funktioniert wieder de mobile Verison nicht mehr. - Diese Antwort wurde vor 10 Jahren von [Julia Jochim](https://de.wordpress.org/support/users/julia-jochim/) geändert. * [Flower33](https://de.wordpress.org/support/users/flower33/) * (@flower33) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31994) * Ich spreche jetzt mal von der anzustrebenden Situation, dass der Code aus Simple CSS entfernt ist und nicht mehr potenziell dazwischenfunkt. Dann hast du noch die style.css des Parent-Themes und die style.css des Child-Themes. Im Parent ist vorgegeben: für breite Views #content (60%) und #sidebar (38%). Das wird, ebenfalls im Parent, unten dann durch die mobile query differenziert, denn die gibt für kleine Views für beide Elemente 100% Breite vor. Du kannst es ja jetzt mal ausprobieren, das für breite Views nach deiner Vorstellung zu ändern: Gib im Child deine gewünschten Werte ein und aktualisiere. Wenn sie nicht greifen, würde ich die fraglichen Elemente, also #content und #sidebar, aus der mobile query des Parent in eine entsprechende mobile query an den Schluss des Childs kopieren. - Diese Antwort wurde vor 10 Jahren von [Flower33](https://de.wordpress.org/support/users/flower33/) geändert. - Diese Antwort wurde vor 10 Jahren von [Flower33](https://de.wordpress.org/support/users/flower33/) geändert. * Themenersteller [Julia Jochim](https://de.wordpress.org/support/users/julia-jochim/) * (@julia-jochim) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31996) * Also, wenn ich das mache, im Child-Theme die Breitenangaben, dann klappt es, aber die mobile Version funktioniert nicht mehr. * Themenersteller [Julia Jochim](https://de.wordpress.org/support/users/julia-jochim/) * (@julia-jochim) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-31998) * Jetzt hab ichs hingekriegt. Uff. * Jetzt muss ich nur noch alles aus Simple CSS ins Child übertragen. Aber jetzt kommt gleich der Umzugsunterenehmer, das muss jetzt warten bis der Umzug rum ist! * Moderator [Marcus Spanier](https://de.wordpress.org/support/users/espiat/) * (@espiat) * [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/2/#post-32000) * Hallo Julia, * dann könntest du den Thread ja eigentlich auf gelöst setzen, oder? * Gruß Ansicht von 15 Antworten – 16 bis 30 (von insgesamt 31) [←](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/?output_format=md) [1](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/?output_format=md) 2 [3](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/3/?output_format=md) [→](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/3/?output_format=md) Das Thema „Shipyard responsiv funktioniert nicht richtig“ ist für neue Antworten geschlossen. ## Schlagwörter * [Css](https://de.wordpress.org/support/topic-tag/css/) * [Mobile](https://de.wordpress.org/support/topic-tag/mobile/) * [responsive](https://de.wordpress.org/support/topic-tag/responsive/) * In: [Themes](https://de.wordpress.org/support/forum/themes/) * 31 Antworten * 3 Teilnehmer * Letzte Antwort von: [Marcus Spanier](https://de.wordpress.org/support/users/espiat/) * Letzte Aktivität: [vor 10 Jahren](https://de.wordpress.org/support/topic/shipyard-responsiv-funktioniert-nicht-richtig/page/3/#post-32002) * Status: gelöst ## Themen ### Beliebteste Themen ### Unbeantwortete Themen ### Nicht-Support-Themen ### Gelöste Themen ### Ungelöste Themen ### Alle Themen