CSS calc funktion

Hallo liebe Community, ich habe in meinem Theme eine Funktion eingebaut die einfach nicht greifen will.

Ich wünsche ein Element wie folgt zu gestalten:
width: calc(50% - 12px);

Ausgegeben wird immer
width: 38%

jemand eine Idee?

Ideen:

  1. falscher media-query
  2. Theme nach der Änderung nicht kompiliert
  3. ggf. mit !important versehen
  4. falsche Class (typo)

Hi Sonic, erst einmal vielen Dank für die schnelle Hilfestellung.

was bedeutet das? :thinking:

:white_check_mark: Theme wurde kompiliert
:x: !important greift nicht
:white_check_mark: class ist def. richtig

Wie und wo ist das denn eingebunden, „inline“, im Theme in einer LESS, in einer über der Theme-Config eingebundenen CSS-Datei?

Das z.B. shopware/cookie-permisson.less at 5.7 · shopware/shopware · GitHub wäre ein media-query und den davon abhängigen CSS-Zuweisungen.

Eingebunden über meine allgemeine CSS Datei, wo auch der gesamte Rest der Seite abgerufen wird.

Schreibst du das ganze in css oder in less? Less verändert die calc Funktion.
Wenn du also width: calc(50% - 12px); im less genau so wieder geben willst dann wäre das
width: calc(~'50% - 12px');

Mehr dazu hier: css - Less aggressive compilation with CSS3 calc - Stack Overflow

Ähm… die Anleitung, dass man calc auch mit der Klammer schreiben kann, wie auf der GitHub Seite war mir bisher unbekannt. Ich habe es soeben mit der angezeigten Variante: width: ~„calc(50% - 12px)“; probiert und es funktioniert!

THX

1 „Gefällt mir“

Es gibt keine „allgemeine CSS“ in SW5. Es wird eine kompiliert eingebunden. Aber in der kann und darf man nichts ändern.

Ok, dann habe ich mich eventuell falsch ausgedrückt. Ich habe die Änderungen in meinem style.css vorgenommen.