Mobile und Desktop getrennt ansprechen

Shopware 5 Themes & Design
1

Hallo Shopware-Community,

ich versuche mein Warenkorbsymbol etwas nach links zu schieben und habe über Firebug auch das richtige Theme raus bekommen. Jedoch würde ich den Befehl gerne nur für das Mobile-Device bzw. den Desktop ausführen, wenn ich jedoch das folgende eingebe, übernimmt er es nicht. Wenn ich den ersten Befehl in meinem Theme ( @media (min-width: 769px){ ) weglasse dann übernimmt er es für beide.

@media (min-width: 769px){
.header-main .header–navigation .shop–navigation .navigation–list .navigation–entry.entry–cart .btn i {
    left: 150px;
}

Was muss ich tun damit ich getrennt Handy und Desktop anspreche.

Besten Dank

Johannes

2

dein medien-typ fehlt. @media all  and (min…)

[EDIT] WTF das geht ja auch ohne. man lernt nie aus. Sorry für die falsche Hilfe.

1 Like
3

Nutz doch auch die View Variablen:

https://developers.shopware.com/styletile/_variables-structure.html

1 Like
4

Danke für eure Antworten.

Wenn ich das so eingebe:

@phoneLandscapeViewportWidth: 30em;     // 480px
.header-main .header–navigation .shop–navigation .navigation–list .navigation–entry.entry–cart i {
    left: 105px !important;
}

Dann übernimmt er das für beides.

Ne Idee?

5

Cache gelöscht und neu kompiliert?

1 Like
6

Jup, sogar in der richtigen Reihenfolge :wink:

7

Keine Ahnung warum aber @media screen and (min-width: @tabletViewportWidth) { // View für Tablets und Desktops

war die Lösung!

Besten Dank an alle