> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.staylive.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# CMS Styling - Utformning för mobil vs iPad/Desktop View

Kunderna kommer att se din plattform på olika enheter, allt från små mobilskärmar till stora datorskärmar, så det är viktigt att din plattform ser bra ut när den visas på alla enheter.

Den standardkonfiguration och styling som vi har använt i vår plattformseditor gör att många av komponenterna kan anpassas väl för olika skärmstorlekar, men det finns vissa situationer där du kan behöva redigera viss styling manuellt för att den ska optimeras.

När du lägger till en styling (t.ex. `text-lg` ), kommer denna styling att tillämpas på alla skärmstorlekar.

När du behöver använda olika stilar för olika skärmstorlekar bör du använda prefixen "brytpunkt/breaking point" för att definiera vilken stil som gäller för vilka skärmstorlekar. Du hittar en fullständig lista över brytpunktsprefix/breaking point på [https://tailwindcss.com/docs/responsive-design](https://tailwindcss.com/docs/responsive-design) . 

Ibland behöver du inte använda någon brytpunktstyling/breaking point. När du behöver använda den räcker det i 99% av fallen att definiera endast en brytpunkt med `sm:###` (som påverkar skärmstorlekar på 640 pixlar eller större - en typisk maxstorlek för mobila enheter), tillsammans med en standardstyling med `###` (dvs. utan någon brytpunkt, som därför kommer att tillämpas på skärmstorlekar som är mindre än 640 pixlar). Detta gör att du kan definiera en annan styling för mobila enheter jämfört med andra enheter.

När du lägger till en styling med hjälp av denna brytpunkt (t.ex. `sm:text-2xl` ), kommer denna styling att tillämpas när enheten har en skärmstorlek **större** än 640px. 

||| Intuitivt kan du tro att "sm" betyder att denna styling gäller för "små" enheter, men så är inte fallet, eftersom Tailwind fungerar med mobil-första design. Det är viktigt att komma ihåg att all brytpunktstyling du använder kommer att tillämpas på enheter som är större än den brytpunktens skärmstorlek.

Som visas i exemplet ovan är denna brytpunktstyling ofta användbar för texter, där du vill att texten ska vara mindre för mobilvisning (t.ex. `text-lg` ) och större för iPad/Desktop-visning (t.ex. `sm:text-2xl` ).

Andra exempel där vi ofta använder breakpoint styling är för sponsor/partnerlogotyper och för knappar.

För sponsor-/partnerlogotyper kan det vara bra att logotyperna är mindre för mobilvisning (t.ex. `h-24` och `w-24` ) och större för iPad-/datorvisning (t.ex. `sm:h-36` och `sm:w-36`  ). Du kanske också vill att marginalerna mellan varje logotyp ska vara mindre för mobilvisning (t.ex. `m-2` ) och större för iPad/Desktop-visning (t.ex. `sm:m-4` ).

På samma sätt för knappar kan det vara bra att justera textstorleken, knappstorleken/paddingen och marginalerna, så att dina knappar ser bra ut på alla skärmstorlekar!

|| Dessa brytpunkter kan tillämpas på absolut all styling som du lägger till på plattformen, och du kanske märker att de tillämpas som standard på vissa komponenter, till exempel _Vertical Content Feed_, som har olika antal kolumner beroende på skärmstorlek.

I plattformsredigeraren kan du klicka på ikonen längst upp till höger för att växla mellan förhandsgranskningsläget för desktop och förhandsgranskningsläget för mobil, enligt bilden nedan.

![](https://storage.crisp.chat/users/helpdesk/website/acbaf8a9e186c000/screen-recording-2024-11-06-at_q16x98.gif)

### Spara och publicera
När du har gjort ändringar i plattformsredigeraren ska du alltid komma ihåg att trycka på **Spara** längst ned till vänster för att spara dina ändringar, då får du en förhandsgranskning till höger.

Om du är nöjd med dina ändringar trycker du på **Publicera** för att göra dem tillgängliga på plattformen. Du kan också trycka på **Släng utkast ** för att radera alla dina ändringar efter den senaste publiceringen.