Right to Left phone number

Store Design
1

Hello

My website is in 2 languages - so when I switch to Arabic - I managed to make it shifts to RTL

However the phone number in the Footer is also RTL and it doesn’t make sense - how can I change this?

Website is https://www.thebodyshop.iq/

Passwords Riacia

TBS2023_0-1715578529618.png
TBS2023_0-1715578529618.png424×390 7.23 KB

2

Hi @TBS2023
You need to add come kind of class in the phone no by modify the mark up


**+964 774 801 0008**

**+964 751 821 2593**

to

**+964 774 801 0008**

Then you need to insert this CSS in base.css

```markup
.unset_rtl_phone{
direction: ltr;
    text-align: right;
}

It will then show like

13-05-24-footer-phon.png
13-05-24-footer-phon.png441×377 11.3 KB

Hope it solve your issues
Thank you from ShopiDeves

3

Add This Code in Your edit code > theme.css File

.footer__collapsible p:nth-child(n+4) {
    font-size: 16px;
    direction: ltr;
    padding:0 35px;
}
1 Like
4

Hello, If you put some kind of class in your phone no that will easy for cass to change the rtl direction. If you use CSS with nth-child way , when your more content added above the phone no the issue will arise again.

+964 774 801 0008

change to

+964 774 801 0008

and insert this CSS

.unset_rtl_phone{
direction: ltr !important;
 text-align: right;
}

Hope this will solve your issues.
Thank you

5

Hello, @TBS2023

Do you want to set the phone number to LTR?

6

This is Noah from PageFly - Shopify Page Builder App

You can fix it by add code here:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

1 Like
7

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

8

Hi,
My suggestion is to use some kind of class in your content and then change it, using CSS nth-child will made issue in the long run , when you add more content above the phone no. It will show same error again. You can do something like


**+964 774 801 0008**

to

**+964 774 801 0008**

​

and CSS

.unset_rtl {
    text-align: right;
    direction: ltr !important;
}​

Hope this will solve your issues.

thank you

9

Hi @TBS2023

I suggest you to add custom class name in those tag and then use CSS , other wise future content will change the elements index and again the issue happen.
Thank you