Support » Themes » Shipyard responsiv funktioniert nicht richtig

  • Gelöst Julia Jochim

    (@julia-jochim)


    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. 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)
  • 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.

    Thread-Starter Julia Jochim

    (@julia-jochim)

    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…

    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

    • Diese Antwort wurde geändert vor 7 Jahren, 9 Monaten von Flower33.
    Thread-Starter Julia Jochim

    (@julia-jochim)

    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?

    Thread-Starter Julia Jochim

    (@julia-jochim)

    Sorry, das mit dem Upload hat nicht geklappt… http://www.bilder-upload.eu/show.php?file=861e64-1474293632.png

    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 geändert vor 7 Jahren, 9 Monaten von Flower33. Grund: Nachtrag
    • Diese Antwort wurde geändert vor 7 Jahren, 9 Monaten von Flower33.
    Thread-Starter Julia Jochim

    (@julia-jochim)

    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;}
    }

    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.

    Thread-Starter Julia Jochim

    (@julia-jochim)

    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?

    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!

    Thread-Starter Julia Jochim

    (@julia-jochim)

    Also, wenn ich die sidebar und content-Angaben in die style.css reinschreibe, dann funktioniert wieder de mobile Verison nicht mehr.

    • Diese Antwort wurde geändert vor 7 Jahren, 9 Monaten von Julia Jochim.

    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 geändert vor 7 Jahren, 9 Monaten von Flower33.
    • Diese Antwort wurde geändert vor 7 Jahren, 9 Monaten von Flower33.
    Thread-Starter Julia Jochim

    (@julia-jochim)

    Also, wenn ich das mache, im Child-Theme die Breitenangaben, dann klappt es, aber die mobile Version funktioniert nicht mehr.

    Thread-Starter Julia Jochim

    (@julia-jochim)

    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!

    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)
  • Das Thema „Shipyard responsiv funktioniert nicht richtig“ ist für neue Antworten geschlossen.