Guten Morgen,

Ich habe das Problem, dass der Warenkorb Icon auf dem Smartphone überhaupt NICHT angezeigt wird. ich habe versucht die Position zu fixen. Seit dem wird der Warenkorb nicht mehr angezeigt. Im View Modus von Jimdo für das Smarphone schon. Wenn ich mein Broserfenster auf dem Desktop klein schiebe ist er auch noch da.

Weis vielleicht jemand wie man den Warenkorb fixiert? (PS: mein Warenkorb sind die 3 gelben Streifen)

Die Fotos sind beide von meinem Desktop. Aber auf dem Smartphone fehlt der Warenkorb Icon weiterhin.

Es funktioniert nicht. Er ist jedenfalls NICHT sichtbar. Wenn man auf dem Smartphone oben rechts klickt kommt man aber in den Checkout-Bereich.

Ich muss nochmal schauen. Hab mir heute alles zerschossen. Die virtuelle vorschau funktioniert auch. Das Problem gibt es dann nur bei dem richtigen Smartphone.

Ich habe, da ich es meine erste Seite ist und ich keine Vorerfahrung in CSS hatte, erstmal meinen Code geordnet den ich in "edit head" eingegeben habe (was den Warenkorb betrifft. Es ist denke ich mal ein ziemlich schlecht geschriebener Code. Ich habe heute auch den Code gelöscht und bin komplett von vorne angefangen, aber dann habe ich die Position nicht mehr hinbekommen.

Hier ist mein aktuller Code zum Warenkorb:

.j-cart-item-amount {
display: none !important;
}

.j-cart-icon {
background-image: url("https://image.jimcdn.com/app/cms/image/transf/none/path/s99226e95a4b0d312/image/i17afc8ed13fcb31f/version/1470263977/image.png") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}

.j-cart {
position: fixed;
top: 5% !important;
right: 5% !important;
}


.j-cart--hover-popup::after, .j-cart--hover-popup:after {
position: absolute;
right: 10px;
top: -30px;
display: block;
width: 0;
height: 10px;
border: 10px solid transparent;
border-bottom-color: transparent;
}

.j-cart .j-cart--hover-popup--call-to-action-button {
background-color: transparent;
border-color: #000;
color: #000;
font-size: 1.25rem !important;
border-width: 1px;
border-style: solid;
border-radius: 0;
}

.j-cart .j-cart--hover-popup--call-to-action-button:hover, .j-cart .j-cart--hover-popup--call-to-action-button:active, .j-cart .j-cart--hover-popup--call-to-action-button:focus {
background-color: transparent;
border-color: #000;
color: #000;
}

.j-cart {
position: fixed;
top: 50px;
right: 50px;
}

.j-cart--hover-popup {
font-size: 1vw !important;
color: #000;
text-align: left;
}

.j-cart.is-empty {
display: none;
}

.j-cart-icon {
color: #000;
text-decoration: none;
position: relative;
background-color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
text-align: center;
display: inline-block;
padding: .4em .9em;
border-radius: 0px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
}

.j-cart-icon {
background:
url()
rgba(#FFFFFF)
no-repeat center left !important;
width: 40px;
height: 40px;
border:1px solid rgba(255,255,255,0);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding:0px;
}

.j-cart-icon::before, .j-cart-icon:before {
content:"";

}

.j-cart-item-amount {
margin-left:-10px;
color:#000000;
}

.j-cart-item-amount {
margin-top:50px;
}

.j-cart-item-amount {
line-height:4.8;
font-size:12px;
font-weight:normal;
}

.j-cart .icon-web-loading-spinner {
display:none;
}

.j-cart--hover-popup {
display: none;
position: relative;
color: #000;
background-color: #FFF;
background-color: rgba(255,255,255,0);
margin-top: 10px;
padding: 1em;
text-align: left;
-webkit-transition: all .1s ease;
transition: all .1s ease;
}

.j-cart--hover-popup--call-to-action-button {
text-align: center;
display: block;
padding: .4em .9em;
background-color: transparent;
background-color: rgb(0,0,0),0;
color: #000;
border-radius: none;
text-decoration: none;
}

Das schießt das immer aus dem Smartphone. Mein aktueller Code:

.j-cart {
position: fixed; <---- das musste auch raus weil es beim kleiner ziehen des Browsers zu fehler führte!
top: 5% !important; <---- das musste auch raus weil es beim kleiner ziehen des Browsers zu fehler führte!
right: 5% !important; <---- das musste auch raus weil es beim kleiner ziehen des Browsers zu fehler führte!
}

.j-cart-icon {
background-image: url("https://image.jimcdn.com/app/cms/image/transf/none/path/s99226e95a4b0d312/image/i17afc8ed13fcb31f/version/1470263977/image.png") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-color: rgba(0,0,0,0) !important;
color: none !important;
text-decoration: none;
text-align: center;
display: inline-block;
padding: 0px !important;
border-radius: 0px !important;
-webkit-transition: all .1s ease;
transition: all .1s ease;
background:
url()
rgba(#FFFFFF)
no-repeat center left !important;
width: 40px;
height: 40px;
/*<![schießen das cart symbol vom smartphone. es ist aber noch benutzbar wenn man oben rechts klickt[*/
position: fixed !important;
top: 5% !important;
right: 5% !important;
}

.j-cart--hover-popup {
font-size: 1.25rem !important;
display: none;
position: relative;
color: #000;
background-color: #FFF;
background-color: rgba(255,255,255,0);
margin-top: 50% !important;
padding: none !important;
text-align: left;
-webkit-transition: all .1s ease;
transition: all .1s ease;
}

.j-cart--hover-popup::after, .j-cart--hover-popup:after {
position: absolute;
right: 10px;
top: 10% !important;
display: block;
width: 0;
height: 10px;
border: 10px solid transparent;
border-bottom-color: transparent;
}

.j-cart .j-cart--hover-popup--call-to-action-button {
background-color: transparent !important;
border-color: #000 !important;
color: #000 !important;
font-size: 1.25rem !important;
border-width: 1px !important;
border-style: solid !important;
border-radius: 0 !important;
}

.j-cart .j-cart--hover-popup--call-to-action-button:hover, .j-cart .j-cart--hover-popup--call-to-action-button:active, .j-cart .j-cart--hover-popup--call-to-action-button:focus {
background-color: transparent !important;
border-color: #000 !important;
color: #000 !important;
}

.j-cart--hover-popup--call-to-action-button {
text-align: center;
display: block;
padding: .4em .9em;
background-color: transparent;
background-color: rgb(0,0,0),0;
color: #000;
border-radius: none;
text-decoration: none;
}

.j-cart.is-empty, .j-cart .icon-web-loading-spinner, .j-cart-item-amount {
display: none;
}

.j-cart-icon::before, .j-cart-icon:before {
content:"";
}

Jetzt habe ich das Problem, dass es nur in den Browser Mozilla Firefox angezeigt wird. In Chrome und Safari ist das Icon erst sichtbar wenn ich mit der Maus drauf bin. Wie mache ich denn, dass man es auch sieht wenn die Maus nicht drau ist?

Habe den Warenkorb nun verflucht und ihn komplett wegrationalisiert. Das Thema hat sich somit erledigt :) trotzdem vielen Dank !