Right to Left phone number

[TBS2023]

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

[Raj-webdesigner · Accepted solution]

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;
}

[Arif_Shopidevs]

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

<p><strong>+964 774 801 0008</strong></p>
<p><strong>+964 751 821 2593</strong></p>
to

<p class="unset_rtl_phone"><strong>+964 774 801 0008</strong></p>
<p class="unset_rtl_phone><strong>+964 751 821 2593</strong></p>

Then you need to insert this CSS in base.css

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

 It will then show like 

Hope it solve your issues
Thank you from ShopiDeves

[Raj-webdesigner · Accepted solution]

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;
}

[Arif_Shopidevs]

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.

<p><strong>+964 774 801 0008</strong></p> change to
<p class="unset_rtl_phone"><strong>+964 774 801 0008</strong></p>

and insert this CSS

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

Hope this will solve your issues.
Thank you

[AnneLuo]

Hello, @TBS2023 

Do you want to set the phone number to LTR?

[PageFly-Noah · Accepted solution]

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 </body>

<style>
.footer__collapsible p:nth-child(4){
    direction: ltr !important;
    display: flex !important;
    justify-content: flex-end !important;
}
.footer__collapsible p:nth-child(5){
    direction: ltr !important;
    display: flex !important;
    justify-content: flex-end !important;
}
</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[AnneLuo]

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 </head> tag

<style>
  .footer__collapsible p:nth-child(n+4):nth-child(-n+5) {
    direction: ltr !important;
  }
</style>
 

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

[Arif_Shopidevs]

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

<p><strong>+964 774 801 0008</strong></p>
to
<p class="unset_rtl"><strong>+964 774 801 0008</strong></p>​

and CSS 

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

Hope this will solve your issues.

thank you

[Arif_Shopidevs]

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