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 - 1 bis 15 (von insgesamt 31)
  • Du überschreibst mit Simple CSS (inline CSS) teilweise wieder deine style.css. Inline CSS schlägt style.css. Also musst du aus der style.css unten die entsprechenden mobilen Media-Queries (z.B. Content-Breite mobil auf 100%, ebenso Sidebar-Breite auf 100% etc.) auch in den Editor von Simple CSS kopieren, sonst gilt deine vorherige Inline-Änderung von 70% Content und 25% Sidebar generell, also auch für die mobile Ansicht.

    Thread-Starter Julia Jochim

    (@julia-jochim)

    Aha…😳 Und was muss ich stattdessen eingeben? Ich bin noch Anfänger.

    Also musst du aus der style.css unten die entsprechenden mobilen Media-Queries (z.B. Content-Breite mobil auf 100%, ebenso Sidebar-Breite auf 100% etc.) auch in den Editor von Simple CSS kopieren

    /* MOBILE */
    @media screen and (max-width:767px) {
    	/* MAIN CONTENT AREA */
    	#content {width:100%; padding:0 0 5px;}
    
    	/* SIDEBAR */
    	#sidebar {width:100%; margin:0; padding:10px 0 0; float:left;}
            .widget {margin:0 0 10px;}
    }

    Diese Zeilen unter deinem bisherigen Code in Simple CSS einfügen (70%, 25% für die Desktop-Ansicht oben so lassen). Schau mal, obs dann wie gewünscht klappt.

    Thread-Starter Julia Jochim

    (@julia-jochim)

    Hallo,
    danke, ich bin manchmal ein bisschen schwer von Begriff. Jetzt ist mir auch klar, wo der FEhler lag, jetzt hab ichs kapiert. Hat auch geklappt. Es gibt nur noch ein Problem: Auf der Startseite steht das erste Wort des Haupttextes „WLH“ direkt neben dem Bild, anstatt mit dem Resttext darunter. Was muss ich da für einen Befehl eingeben, damit das nach unten springt?

    Du kannst per CSS dem Bild sagen, dass es nicht floaten soll.

    float: none;

    Thread-Starter Julia Jochim

    (@julia-jochim)

    Okay… ist das dann bei diesem Befehl hier: /* IMAGES */
    .wp-post-image, .single-image {width:50%; margin:0.3em 0.5em 0.3em 0;}
    .format-status .avatar {margin:0.3em 0.5em 0.3em 0;}

    Oder woanders?

    Thread-Starter Julia Jochim

    (@julia-jochim)

    Grade probiert – das funktioniert bei dem Befehl definitiv nicht.

    Hallo Julia,
    du hast z.B. die beiden folgenden Möglichkeiten:
    1)
    Du hebst, wie @es piaT oben schon gesagt hat, das Floaten auf:

    img.alignleft {float:none; }

    und musst dann für den Text noch per CSS einige optische Nachbesserungen vornehmen, oder, vielleicht einfacher für dich, da weniger Nachbesserungen vonnöten,
    2)
    du belässt, wie bisher

    img.alignleft {float:left; }

    und gibst in Simple CSS innerhalb der mobile Media Query Folgendes ein:

    img.alignleft {max-width:50%; }

    Danach gibst du lediglch für eine bessere Optik im HTML-Editor bei WinterLager Hamburg nach dem schließenden </strong> noch einen Zeilenumbruch <br> ein:

    <strong>WinterLager Hamburg </strong><br>

    Teste einfach mal beide Möglichkeiten, um zu sehen, was sich für dich einfacher realisieren lässt und was dir besser gefällt.

    Noch eine Anmerkung zu den CSS-Angaben.
    Ich sehe in deinem Quelltext (für Simple CSS) Folgendes:

    .footer-right, .footer-left {width:100%; margin:5px 0 0; float:left;} }.willkommen {margin-top: 10px;}

    Siehst du am Ende die zwei geschweiften schließenden Klammern vor dem .willkommen?
    Die letzte der beiden schließt die nach dem Anfang der mobile media query geöffnete Klammer. Die Angaben für die Klasse .willkommen und eventuell weitere folgende sollen nicht hinter der letzten der beiden schließenden Klammern stehen, sondern innerhalb der mobile media query, falls sie für den mobilen Bereich gedacht ist, oder vor der mobile media query, falls sie für den Desktop gedacht ist.

    Diese Dinge sind jetzt allerdings reine CSS-Grundlagen, sind also nichts WordPress-Spezifisches mehr.
    Tipp: Wenn du weiterhin für andere Leute Websites erstellen willst, arbeitest du dich am besten mal in die CSS-Grundlagen ein.
    Es gibt im Netz viele nützliche Tutorials und Nachschlageseiten für CSS-Einsteiger.
    Hier ein paar Beispiele:
    1)
    https://developer.mozilla.org/de/docs/Web/Guide/CSS/Getting_started
    2)
    http://www.html-seminar.de/css-lernen.htm
    3)
    http://de.html.net/tutorials/css/
    4)
    http://www.w3schools.com/css/default.asp

    Thread-Starter Julia Jochim

    (@julia-jochim)

    Hallo,

    ich kenne mich mit CSS schon ein wenig aus, aber es ist halt immer so eine Sache, sich in das CSS eines anderen Menschen reinzudenken. Den ganzen CSS-Text vom Footer habe ich nämlich aus dem Original-Theme, das ist nur rüberkopiert. Man muss erst mal rausfinden, was sch jemand da gedacht hat dabei… Aber ich probiere mal herum, danke für die Vorschläge!

    Viele GRüße
    Julia

    Gelöst?

    @es piaT

    Gelöst?

    Nein, unsere Tipps wurden bisher nicht umgesetzt.
    Alles noch beim Alten derzeit.

    Thread-Starter Julia Jochim

    (@julia-jochim)

    Sorry, ich bin ein paar Tage im Urlaub, leider keine Zeit. Kein Grund, hier aggressiv zu werden.

    Hi,

    wir sind lediglich um deine Lösung bemüht. Und flower33 hat sich gedanklich ausgiebig um eine entsprechende Lösung bemüht.

    Nein, unsere Tipps wurden bisher nicht umgesetzt.
    Alles noch beim Alten derzeit.

    -> Ist lediglich eine Feststellung.

    Dir noch einen schönen Urlaub.

    @es piaT
    Ich hatte kurz eine Bemerkung von wegen verschwendeter Zeit drin, diese aber sofort danach wieder rausgenommen, weil es zwar etwas frustrierend ist, wenn man sich ausführlich Gedanken gemacht hat und die Vorschläge dann nicht umgesetzt werden, es aber letztendlich natürlich rein eine Angelegenheit des Fragestellers ist, wann diese umgesetzt werden. Von Urlaub wusste ich ja nichts. 😉
    Dummerweise hat Julia, da sie in Urlaub ist, wohl nur die ursprüngliche Fassung gelesen, die in ihrem Mail-Eingangsordner liegt. Dumm gelaufen, aber keine große Sache. 😉

    Thread-Starter Julia Jochim

    (@julia-jochim)

    Hallo! Eigentlich hatte die responsive Variante jetzt eine Zeitlang gut funktioniert, aber kürzlich stellte ich fest, es läuft nicht mehr. Ich habe im CSS nichts verändert, alles wie gehabt, aber die Sidebar steht nun wieder, wie am Anfang, rechts anstatt sich unter den Hauptcontent zu verlagern. Ich bin mir nicht sicher, was das verursacht haben könnte. Ich habe einmal versuchshalber auf das Original-Theme umgestellt, auch damit funktioniert es nicht mehr. Bin etwas ratlos. Wo liegt wohl der Fehler?

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 31)
  • Das Thema „Shipyard responsiv funktioniert nicht richtig“ ist für neue Antworten geschlossen.