Info-Box für mobile Geräte unterhalb des Seiten-Content anzeigen (Wordpress)

betterhei

Hallo zusammen,

mein Programmierer ist untergetaucht und ich habe folgendes Problem (hat schonmal funktioniert und jetzt gehts plötzlich nicht mehr):

Die Unterseiten haben einen Quickinfo Bereich der sich an der Seite ausfährt (auf der rechten Seite auch wenn es "_left" heißt :):

CSS

[COLOR=#a9a9a9]/* Fixed Box Weiterbildung */


div#fixed_left h3 {
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 17px;
}


div#fixed_left {
    display: block;
    position: fixed;
    right: -500px;
    top: 60%;
    box-shadow: 0px 0px 25px rgba(0,0,0,.4);
    background: #fff;
    padding: 15px;
    text-align: center;
    padding-right: 20px;
    transition: all ease-in-out .3s;
    z-index: 10000;
    transform: translateY(-50%);
}


@keyframes slideInFromLeft {
  0% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(0);
  }
}


div#fixed_left_info {

    background: url(/wp-content/themes/dt-the7-child/icons/info.png), #00a5b3;
    background-size: 80% !important;
    display: block;
    height: 222px;
    width: 80px;
    color: transparent;
    z-index: 10000;
    padding: 5px;
    background-repeat: no-repeat;
    background-position: top 10px center, top center;
    cursor: pointer;
    animation: 1s ease-out 0s 1 slideInFromLeft;
}






div#fixed_left_info:before {
    content: "Quick-Infos";
    text-transform: uppercase;
    transform: rotate(-90deg);
    width: 122px;
    font-size: 20px;
    position: relative;
    left: -22px;
    top: 114px;
    color: #fff;
    font-family: "HelveticaNeue-Bold", Helvetica, Arial, Verdana, sans-serif !important;
    border-right: 4px solid #fff;
    height: 40px;
    padding-top: 19px;
    margin-left: -5px;
}


div#fixed_left_info p {
    transform: rotate(-90deg);
    top: 60px;
    position: relative;
    display: block;
    font-size: 20px !important;
}


.weiterbildung_back p {
    width: 37px;
}


.weiterbildung_back a:before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    transform: rotate(-45deg);
    position: relative;
    left: -14px;
    top: 24px;
}
.weiterbildung_back a {
    color: #fff;
    text-decoration: none;
    font-family: "HelveticaNeue-Light";
    position: relative;
    top: -10px;
    left: 43px;
    font-size: 17px;
}
.weiterbildung_back {
    background: #9a9c9d;
    position: relative;
    width: 79px;
    top: 5px;
    right: -14px;
    padding-right: 0px;
    margin-left: -29px;
}


.weiterbildung_back p {
    margin-left: -17px !important;
}


#fixed_left.visible{
    right: 0px;
}


.fixed_left_close {
        position: absolute;
    right: -5px;
    font-size: 20px;
    background: #00a5b3;
    cursor: pointer;
    color: #fff;
    top: -15px;
    padding: 5px;
    padding-bottom: 0px;
    padding-top: 7px;
    padding-left: 7px;
}


.weiterbildung_anmeldung button {
    color: #fff;
    background: #00a5b3;
    border: none;
    padding: 10px 25px;
    width: 100%;
    text-transform: uppercase;
    font-size: 17px;
    padding-top: 15px;
    font-family: "HelveticaNeue-Bold", Helvetica, Arial, Verdana, sans-serif !important;
    line-height: 25px;
}[/COLOR]

Alles anzeigen

In der Mobilen Ansicht soll der Box-Inhalt unterhalb des SeitenContents angehängt sein. Derzeit überlagert er allerdings den kompletten Content:

CSS

[COLOR=#a9a9a9]@media only screen 
and (max-width: 768px) { 
    .menu_horizontal{
        display: none;
    }


    .quickinfo_header{
        display: block;
    }


    .fixed_left_container .vc_column-inner {
    padding-left: 7.5px;
    padding-right: 7.5px;
}


    .fixed_left_container {
        margin-left: 0px !important;
        border-left-width: 0px !important;
        padding-left: 0px !important;
        width: 100%;
    }


    .fixed_left_container .accent-border-color .uvc-headings-line {
    border-color: #00a5b3 !important;
    border-top: 0;
    border-right: 0;
    border-left: 0;
}


    div#fixed_left_info {
        display: none;
    }


    .fixed_left_close{
        display: none;
    }


    div#fixed_left {
        display: block;
        position: relative;
        right: 0px;
        top: 0px;
        box-shadow: none;
        background: #fff;
        padding: 15px;
        text-align: center;
        padding-right: 00px;
        transition: none;
        z-index: unset;
        padding-left: 0px !important;
        margin-bottom: 10px;
    }[/COLOR]

Alles anzeigen

Hat jemand eine Lösung? Wäre sehr dankbar um jegliche Hilfe. Der 2. Programmierer hat den Bereich einfach auskommentiert für die mobile Ansicht, das ist aber nicht gewünscht.

Ein zweites Problem: Die Infobox liegt unterhalb des Headers und des Seitentitels. Kann man das irgendwo definieren, dass sie ganz "oben auf" liegt?

Viele Grüße,
Jasmin

ginaN

Hallo Jasmin,
ich kann deine Probleme sichern icht direkt lösen, aber vielleicht ein paar Hinweise zu euerm Code:

1. Problem:
Die Position von div#fixed_left wurde für die mobile Ansicht von fixed auf relative gesetzt, das ist schon mal gut. Je nach dem wo im Quellcode dieses div steht erscheint es jetzt relativ zu seiner Position. Schaut mal ob sich Quickbox noch in einem div befindet das auch die Angabe relativ braucht.

2. Problem:
eigentlich müßte das mit der Angabe das z-index zu lösen sein. Schaut mal ob Header und Seitentitel einen höheren z-index haben als div#fixed_left

viele Grüße
Gina

betterhei

Hallo gina,

vielen Dank, hab zu 1. versucht dem div eine position zuzuweisen, hat aber keine Veränderung gebracht. vielleicht hat das auch was mit dem visual composer zu tun?

zu 2. hab ich den z-index mit noch mehr nullen versehen leider auch ohn auswirkung.

Viele Grüße,
Jasmin

ginaN

Hi Jasmin, mit Visual Composer kenne ich mich leider nicht aus ... :((
zu 2. ... haben Header und Seitentitel denn überhaupt einen z-index zugewiesen?
Ich vermute mal das liegt an der "Verschachtelung" von div's, gerade wenn mit Pagebuildern gearbeitet wird. Ist auch nicht weiter schlimm, da müßte man genau rausbekommen was wo liegt ...

Falls du einen Link zum Projekt direkt hast kann ich gerne mal auf die Seite schauen, ... ich weiss, bei Entwicklungsprojekte ist das immer ein bisschen schwierig ... aber im Browser kann man das halt alles besser analysieren ... ansonsten muss ich hier passen

Viele Erfolg noch ... Gina

betterhei

hab dir den link in einer PN geschickt

ginaN

Hi Jasmin, also hab mir das ganze mal in der Browser-Konsole angeschaut.

In der mobilen Version steht der z-index vom Header auf 102

Wenn ich den z-index vom div#fixed_left auf 200 setze funktioniert es ...
Dann liegt der Inhalt der Quickbox (also die Ansprechpartner) über dem Header.

Problem 1:
Also die Position der Box im Quelltext ist an der richtige Stelle, schön weit hinten hinter dem normalen Content ...

das div#fixed_left_container in dem die Quickbox drinliegt hat allerdings noch die "fixed" CSS-Zuweisung aus der Desktop-Version. Und die ist auch noch als important! angegeben.
position: fixed !important
Wenn ich das im Browser einfach auf relativ stelle funktionierts ... achtet mal darauf das ihr das in der mobilen Version irgendwie mit "relativ" überschreibt ...

Drück die Daumen das das funktioniert ...

Viele Erfolg noch ... Gina

betterhei

Gina, ich bin Dir so unendlich Dankbar, das kannst Dir gar ned vorstellen. Alles funktionert!!!

Falls Du Freelancer bist meld Dich bitte nochmal bei mir, brauchen DRINGEND jemand wie Dich für unsere Websiten.

Bin so happy

Viele Grüße,
Jasmin

ginaN

Gern geschehen ... hast du meine PN gerade bekommen? Wird mir im Postfach irgendwie nicht angezeigt ... ...

Info-Box für mobile Geräte unterhalb des Seiten-Content anzeigen (Wordpress)

Tags

Benutzer online in diesem Thema