Allgemeines » Warenkorb wird auf dem Smartphone nicht angezeigt

Jimdo-Userforum � Jimdo User-Forum � Allgemeines � Warenkorb wird auf dem Smartphone nicht angezeigt

Themen-Einstellungen

Bereich wechseln

Allgemeines Regeln f�r die Benutzung des Forums HowToDo ( = so geht�s) Jimdo User-Forum Eure Jimdo-Webseiten - Vorstellungsrunde Bugs, Workarounds und Anregungen Jimdo-Elemente Allgemeines Jimdo-Shop Jimdo-Specials (Tools, Widgets, HTML und CSS) Suchmaschinenoptimierung (SEO) Sonstiges Tutorials "OffTopic"-Themen "�bernahme" von Beitr�gen aus dem offiziellen Jimdo-Forum... Nutzungsbedingungen und Haftungsausschluss Jimdo-Blog

#1 | Warenkorb wird auf dem Smartphone nicht angezeigt datum

05.08.2016 07:02 (zuletzt bearbeitet: 05.08.2016 17:28)

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.

Antworten

#2 | RE: Warenkorb wird auf dem Smartphone nicht angezeigt datum

05.08.2016 18:37 (zuletzt bearbeitet: 05.08.2016 22:53)

az_

Informationen anzeigen

Beitr�ge:	2414
Registriert seit:	28.04.2015
Wohnort:	Berlin

Möglicherweise liegt es daran, dass Du 2 fixierte Elemente hast. Das erste überlagert das zweite ab einer bestimmten Browserbreite.

Sowas hatte ich auch schon mal, z.B.: bei

- http://miami-designtest.jimdo.com/

...da ist das Logo fixiert und soll die Navi überlagern. Beide Elemente sind "fixed" - leider kann man da mit z-index nix mehr reißen. Ich hab das Logo mit einem JS vor die Navi gesetzt:

1
2
3
 
<script> $('.jtpl-logo')
    .prependTo('.navigation-colors');
</script>
 

...jetzt funzt es :)

LG, az

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

Bitte sendet mir keine privaten Nachrichten über dieses Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

...hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#3 | RE: Warenkorb wird auf dem Smartphone nicht angezeigt datum

05.08.2016 19:09

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

Antworten

#4 | RE: Warenkorb wird auf dem Smartphone nicht angezeigt datum

05.08.2016 22:26 (zuletzt bearbeitet: 05.08.2016 22:29)

...bei mir funzt es jetzt, jedenfalls in der virtuellen Vorschau. Zwar stimmt die Position noch nicht und die gelben Balken fand ich besser, aber dargestellt wird es.

War meine Vermutung mit den 2 fixed Elementen richtig?

LG, az

az_ hat folgende Bilder an diesen Beitrag angeh�ngt

Bild 61.png

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#5 | RE: Warenkorb wird auf dem Smartphone nicht angezeigt datum

05.08.2016 22:37

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

Antworten

#6 | RE: Warenkorb wird auf dem Smartphone nicht angezeigt datum

05.08.2016 22:45

az_

Informationen anzeigen

Beitr�ge:	2414
Registriert seit:	28.04.2015
Wohnort:	Berlin

für die Position reicht

1
2
3
4
5
 
.j-cart {
    position: fixed;
    top: 2.4em !important;
    right: 5% !important;
}
 

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#7 | RE: Warenkorb wird auf dem Smartphone nicht angezeigt datum

05.08.2016 23:50 (zuletzt bearbeitet: 05.08.2016 23:54)

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

Antworten

#8 | RE: Warenkorb wird auf dem Smartphone nicht angezeigt datum

06.08.2016 00:54

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?

Antworten