Solved

Right to Left phone number

TBS2023
Excursionist
59 1 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

 

Accepted Solutions (2)

Raj-webdesigner
Shopify Partner
251 55 60

This is an 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;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


View solution in original post

PageFly-Noah
Astronaut
1119 201 220

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 8 (8)

Arif_Shopidevs
Shopify Partner
133 18 13

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 

13-05-24-footer-phon.png
Hope it solve your issues
Thank you from ShopiDeves

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

Raj-webdesigner
Shopify Partner
251 55 60

This is an 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;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Arif_Shopidevs
Shopify Partner
133 18 13

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

AnneLuo
Shopify Partner
468 96 94

Hello, @TBS2023 

Do you want to set the phone number to LTR?

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

PageFly-Noah
Astronaut
1119 201 220

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

AnneLuo
Shopify Partner
468 96 94

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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

Arif_Shopidevs
Shopify Partner
133 18 13
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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

Arif_Shopidevs
Shopify Partner
133 18 13

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers