Fix · Pages, phones and Arabic

Arabic page is not right-to-left

Blocks your workKuwait and Gulf

What you may see

Arabic text is aligned to the left and the menu is on the wrong side
Only some parts flip

Most likely cause

The page lacks the right-to-left setting on the html element, or the styles use left and right instead of start and end.

Check first (about two minutes)

Inspect the html element: does it have dir="rtl" and lang="ar" on Arabic pages?
Search the CSS for margin-left, padding-right, left:, right:, text-align:left.

The fix prompt

What you type here never leaves your browser. The search runs on this page, and nothing is sent to a server or to an AI.

The exact error or what you see

What you did before it happened

Kept only in this browser, on this device. Keys and passwords are removed before anything is saved.

Prompt language

You are a senior front-end engineer who knows HTML, CSS, React, phones and Arabic right-to-left pages, and explains things to people who are not developers. I am not a developer, so explain every step in plain words and tell me exactly which button, menu or command you mean. If you are not sure about something, say so; do not guess.

I am in Kuwait. If the service has a Kuwait or Gulf rule or option that matters here (for example KNET, Arabic right-to-left text or local time), take it into account.

THE PROBLEM
Arabic page is not right-to-left

THE EXACT ERROR OR WHAT I SEE
[paste the exact error here]

WHAT I DID BEFORE IT HAPPENED
[write in a few words what you did before it happened]

MOST LIKELY CAUSE
The page lacks the right-to-left setting on the html element, or the styles use left and right instead of start and end.

DO THESE STEPS, IN THIS ORDER
1. Set lang and dir on the html element from the page language (ar gets dir="rtl").
2. Replace physical properties with logical ones (margin-inline-start, padding-inline-end, inset-inline-start, text-align: start).
3. For flex and grid rows, let the direction follow the page; do not hard-code row-reverse for Arabic.
4. Check forms, menus, sliders, dropdowns and icons on Arabic pages.
Stop and tell me if what you see does not match a step. Do not skip ahead.

CHECK THAT IT WORKED
- The Arabic page starts at the right edge, the menu flows from the right, and English pages are unchanged.
Tell me exactly what I should see on the screen when it works.

DO NOT CHANGE
- Do not duplicate the stylesheet for Arabic.
- Do not flip images, logos or phone numbers.
- Anything I did not ask about: the design, the text, other pages, other settings or the data.
- Do not delete files, data or branches, do not reset or force-push, and do not rewrite history, unless you first show me exactly what would be lost and I say yes.
- Do not paste, print or ask me to paste a password or secret key into this chat. If one is needed, tell me which settings page of the right service to store it in.

WHEN YOU FINISH
Explain in simple words what you changed (file by file or setting by setting), why you changed it, and how I can undo it.

Paste it into Claude, ChatGPT, Gemini or Cursor, then follow what it says.

After you tried it, did it work?

Steps

Set lang and dir on the html element from the page language (ar gets dir="rtl").
Replace physical properties with logical ones (margin-inline-start, padding-inline-end, inset-inline-start, text-align: start).
For flex and grid rows, let the direction follow the page; do not hard-code row-reverse for Arabic.
Check forms, menus, sliders, dropdowns and icons on Arabic pages.

Do not do this

Do not use transform: scaleX(-1) on the whole page.
Do not duplicate the stylesheet for Arabic.
Do not flip images, logos or phone numbers.

Try another entry