Support » WooCommerce » Versteckte Box entfernen -css code?-

  • Gelöst garnelenshop

    (@garnelenshop)


    Hallo,

    nun hab ich fast alles im Griff und siehe da nun taucht eine versteckte Box hinter den Headerbuttons auf.
    Durch die Box verschieben sich die Buttons schon bei geringer Auflösung des Monitor. Nimmt halt gut 20% der Buttonspalte ein.

    Das ganze müsste in der @media (min-width 768px) sein.
    Wenn ich da Flex und max width auf 0% setze ist Sie weg.
    Aber den Code direkt aus Firefox in den Customizer scheint nicht zu gehen.

    Kann mir da eventuell jemand weiterhelfen?
    Eventuell mit dem richtigen css Code.

    Wollte hier im Thema ein Bild mit anhängen, finde aber keine Möglichkeit.

    Vielen lieben Dank

    Gruß
    Marco

    • Dieses Thema wurde geändert vor 3 Wochen, 3 Tage von garnelenshop.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • Hallo,
    Wie kann man hier Bilder in einen Forenbeitrag einfügen?

    nun hab ich fast alles im Griff und siehe da nun taucht eine versteckte Box hinter den Headerbuttons auf.

    Sorry, ich verstehe nicht was du meinst. Meinst du das Bild hinter den Menüeinträgen? – Und was soll da versteckt sein?

    An dieser Stelle möchte ich aber noch darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu, auch wenn wir je nach Zeit mal entsprechende Tipps geben.
    Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier.

    Viele Grüße
    Hans-Gerd

    Thread-Ersteller garnelenshop

    (@garnelenshop)

    Hallo,

    Die im roten Kreis umrandete nicht sichtbare Box direkt hinter …. / Zahlung & Versand / Mein Konto / Warenkorb / nicht sichtbare Box

    Das ist doch woocommrce oder das Theme wo die verstecke Box drin ist.
    Mit dem Customizer geht das ja normal, nur wird der Code von Firefox nicht übernommen.

    Gruß
    Marco

    • Diese Antwort wurde geändert vor 3 Wochen, 3 Tage von garnelenshop.

    Moin,
    Trag im Adminbereich unter Design »» Customizer »» Zusätzliches CSS das Folgende ein (ganz ans Ende packen):

    @media (min-width: 768px) {
        #navbar .col-md-9 {
            flex: 0 0 100%;
            max-width: 100%;
        }
        #navbar .col-md-3 {
            flex: 0 0 0;
            max-width: 00;
        }
    }

    Nach dem Abspeichern musst du den Browsercache leeren, drücke dafür CTRL SHIFT Entf gleichzeitig, dadurch wird in den gängigen Browsern ein Fenster zum Löschen geöffnet (weitere Hilfe dazu).

    Solltest du ein Cache-Plugin installiert haben, leere auch diesen Cache. Nun teste auf der Seite, ob du eine Änderung siehst.

    Thread-Ersteller garnelenshop

    (@garnelenshop)

    Hi,
    
    ah jetzt hab ich den Fehler durch dich gefunden.
    Vielen Dank, glaub ohne dich wäre mir das nicht aufgefallen.
    
    Das war mein Code.
    

    @media min-width: 768px) {
    col-md-9 {
    flex: 0 0 0%;
    max-width: 0%;
    }`
    }` Da lag bereits der Fehler am fehlenden ( und #navbar.
    Woher weisst du das vor col-md-9 #navbar muss?

    Ich hatte auch so gesehen nur

    @media (min-width: 768px) {
        #navbar .col-md-9 {
            flex: 0 0 100%;
            max-width: 100%;
        }

    }`

    So verschwindet die Box auch…

    Dein Code hat aber noch
    #navbar .col-md-3 {
    flex: 0 0 0;
    max-width: 00;
    }

    mit drin.

    Kannst du mir eventuell erklären wieso der Abschnitt dabei ist?

    Danke dir`

    LG
    Marco

    Hallo Marco,

    da ist mir irgendetwas beim Kopieren verrutscht. Der komplette Code ist:

    @media (min-width: 768px) {
        #navbar .col-md-9 {
            flex: 0 0 100%;
            max-width: 100%;
        }
        #navbar .col-md-3 {
            flex: 0 0 0;
            max-width: 0;
            width: 0;
            padding: 0;
       }
    }

    Zur Erklärung: Verwendet wird das Framework Bootstrap, das ein 12-Spalten-Grid als Basis hat. col-md-9 = 9 Spalten bei mittlerem Viewport. col-md-3 = 3 Spalten bei mittlerem Viewport.

    Wenn nun durch den Code col-md-9 die ursprüngliche Breite von 75 % auf 100 % gesetzt wird, rutscht col-md-3 in die nächste Zeile. Das hätte jetzt bei deinem Theme keine unmittelbaren Auswirkungen gehabt, aber man sollte das immer komplett absichern.

    https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

    Thread-Ersteller garnelenshop

    (@garnelenshop)

    Mit diesen 12 Spalten muss ich noch durchsteigen.
    Das ist echt alles ganz anders wie früher mit Joomla oder HTML Editor.
    Kommt mir teilweise komplizierter vor (vieleicht auch das Alter 🙂 ) und teilweise leichter..

    Aber wird schon, hab es ja bald geschafft und beim nächsten Mal wird es einfacher.

    Vielen lieben Dank

    Och, die Templates von Joomla! haben doch auch vorzugsweise mit Bootstrap gearbeitet. Mit dem HTML-Editor konntest du da doch eher keine Templates erstellen. Aber das geht jetzt offtopic.

    Vielen lieben Dank

    Gerne 🙂

    Thread-Ersteller garnelenshop

    (@garnelenshop)

    Naja, lange ist es her mit Joomla 1.3 🙂 🙂

    Muss sagen, so super und schnell wie hier im Forum geholfen wurde, Hut ab…

    Erst such ich Stundenlang versuch alles mögliche, dann kommt Ihr und es ist am Ende nur ein Klick… 🙂
    Hatte am Anfang auch mit Phase 5 (falls dir der Editor was sagt) die CSS lokal bearbeitet und wieder hochgeladen (eben joomla Anfnags Style).
    Bis mir mal jemand sagte, dass die ganzen Änderungen über Customizer rein müssen, da sonst nach dem nächsten Theme Update alles weg ist.
    Da dachte ich noch Customizer wäre auch ein HTML Editor.. 😀

    Glaub wenn das passiert wäre hätte ich WD nicht mehr angeschaut… -Lach-

    Beste Grüße
    Marco

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)