# CSS calc funktion

**URL:** <https://forum.shopware.com/t/css-calc-funktion/87409>\
**Category:** Programmierung\
**Created:** [5. Mai 2021 um 10:44 UTC](https://forum.shopware.com/t/css-calc-funktion/87409 "2021-05-05T10:44:18Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![David2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/david2/32/13377_2.png) [@David2](https://forum.shopware.com/u/David2)\
**Post date:** [5. Mai 2021 um 10:44 UTC](https://forum.shopware.com/t/css-calc-funktion/87409/1 "2021-05-05T10:44:18Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sonic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sonic/32/25728_2.png) [@sonic](https://forum.shopware.com/u/sonic)\
**Post date:** [5. Mai 2021 um 11:21 UTC](https://forum.shopware.com/t/css-calc-funktion/87409/2 "2021-05-05T11:21:43Z")

</div>

Ideen:

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

---

<div class="post-metadata">

**Author:** ![David2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/david2/32/13377_2.png) [@David2](https://forum.shopware.com/u/David2)\
**Post date:** [5. Mai 2021 um 11:42 UTC](https://forum.shopware.com/t/css-calc-funktion/87409/3 "2021-05-05T11:42:47Z")

</div>

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

> [@sonic](#):
>
> falscher media-query

was bedeutet das? 🤔

> [@sonic](#):
>
> - Theme nach der Änderung nicht kompiliert
> - ggf. mit !important versehen
> - falsche Class (typo)

✅ Theme wurde kompiliert  
❌ !important greift nicht  
✅ class ist def. richtig

---

<div class="post-metadata">

**Author:** ![sonic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sonic/32/25728_2.png) [@sonic](https://forum.shopware.com/u/sonic)\
**Post date:** [5. Mai 2021 um 11:49 UTC](https://forum.shopware.com/t/css-calc-funktion/87409/4 "2021-05-05T11:49:09Z")

</div>

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](https://github.com/shopware/shopware/blob/5.7/themes/Frontend/Responsive/frontend/_public/src/less/_modules/cookie-permisson.less#L89-L126) wäre ein media-query und den davon abhängigen CSS-Zuweisungen.

---

<div class="post-metadata">

**Author:** ![David2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/david2/32/13377_2.png) [@David2](https://forum.shopware.com/u/David2)\
**Post date:** [5. Mai 2021 um 11:52 UTC](https://forum.shopware.com/t/css-calc-funktion/87409/5 "2021-05-05T11:52:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![skarpeta](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@skarpeta](https://forum.shopware.com/u/skarpeta)\
**Post date:** [5. Mai 2021 um 11:53 UTC](https://forum.shopware.com/t/css-calc-funktion/87409/6 "2021-05-05T11:53:30Z")

</div>

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](https://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc)

---

<div class="post-metadata">

**Author:** ![David2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/david2/32/13377_2.png) [@David2](https://forum.shopware.com/u/David2)\
**Post date:** [5. Mai 2021 um 11:54 UTC](https://forum.shopware.com/t/css-calc-funktion/87409/7 "2021-05-05T11:54:16Z")

</div>

Ä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

---

<div class="post-metadata">

**Author:** ![sonic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sonic/32/25728_2.png) [@sonic](https://forum.shopware.com/u/sonic)\
**Post date:** [5. Mai 2021 um 11:54 UTC](https://forum.shopware.com/t/css-calc-funktion/87409/8 "2021-05-05T11:54:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![David2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/david2/32/13377_2.png) [@David2](https://forum.shopware.com/u/David2)\
**Post date:** [5. Mai 2021 um 11:55 UTC](https://forum.shopware.com/t/css-calc-funktion/87409/9 "2021-05-05T11:55:36Z")

</div>

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