my website margins problem when its rtl how to fix it

Store Design
,

Topic summary

A user is experiencing margin issues on their website when switching to RTL (right-to-left) layout for Arabic language using the Kalles theme.

Proposed Solution:
PageFly-Amelia provided a two-step fix:

  • Create a new rtl.css file in the Assets folder with RTL-specific CSS adjustments for margins, padding, and layout direction
  • Include the CSS file conditionally in theme.liquid using {% if request.locale == 'ar' %} to load only for Arabic locale

The suggested CSS targets:

  • General body direction and container margins
  • Section padding adjustments
  • Header/footer text alignment
  • Product grid flex-direction reversal
  • Product item margin corrections

Current Status:
The issue remains unresolved. The user tested the solution on their live site (aromatic.ae/ar) but reported it didn’t work, and they’re still seeking a fix.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

the margins of my website sections changes and ruin the look when its rtl in Arabic theme kalles how to solve this ?

2

Hi @tarekanani ,

This is Amelia from PageFly - a Landing Page Builder App,

Here are some steps to help you fix the margins in your Kalles theme for an Arabic RTL layout:

Step 1: Add RTL CSS1. Access the Theme Editor:

  • Go to Online Store > Themes.

  • Click on Actions > Edit code.

  1. Create a New CSS File:

    • Under the Assets folder, click Add a new asset.

    • Choose Create a blank file and name it rtl.css.

  2. Add RTL-Specific Styles:

    • Add the following CSS code to the rtl.css file:
/* General RTL adjustments */
body[dir="rtl"] {
  direction: rtl;
}

body[dir="rtl"] .container {
  margin-left: auto;
  margin-right: auto;
}

/* Adjust margins and paddings */
body[dir="rtl"] .section {
  margin-left: 0;
  margin-right: 0;
  padding-left: 15px;
  padding-right: 15px;
}

/* Specific adjustments for Kalles theme */
body[dir="rtl"] .header,
body[dir="rtl"] .footer {
  text-align: right;
}

body[dir="rtl"] .product-grid {
  display: flex;
  flex-direction: row-reverse;
}

body[dir="rtl"] .product-item {
  margin-left: 15px;
  margin-right: 0;
}

Step 2: Include the RTL CSS in Your Theme1. Include the CSS File:

  • In the Layout folder, open theme.liquid.

  • Add the following line before the closing tag:

{% if request.locale == 'ar' %}
  
{% endif %}

I hope that my solution works for you.

Best regards,

Amelia | PageFly

3

Hello Amelia here is the website and it didn’t work

aromatic.ae/ar

pass :2024

4

Hello @Amelia_12 I can’t find a solution till the moment