losing responsivity in RTL sites

  • Posts: 7
  • Thank you received: 1
5 years 5 months ago #307164

hello
I installed the quickstart of a theme and as soon as I changed the "site language" to RTL, hikashop lost it's responsivity.
unfortunately this happens even on Protostar. my friend has pro version of hikashop. I asked him to change the language, the same problem.
do you think I should add anything or code or.... to make it responsive in RTL languages?

this is the English site on both mobile and tablet:
classtop.ir/2.png

this is RTL language tablet:
classtop.ir/1.png

RTL language on mobile:
classtop.ir/3.png

hope someone help soon.
kind regards

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
5 years 5 months ago #307179

Hi,

Thanks for the feedback. That's indeed an issue coming from the old CSS of HikaShop 1.x and 2.x hich wasn't updated for HikaShop 3.x and 4.x.
Remove the code:

.hikashop_subcategories .hikashop_category, .hikashop_products_listing .hikashop_product {
	float: right !important;
}
and add instead the code:
@media (min-width:576px) {
	.hkc-xs-1, .hkc-xs-2, .hkc-xs-3, .hkc-xs-4, .hkc-xs-5, .hkc-xs-6, .hkc-xs-7, .hkc-xs-8, .hkc-xs-9, .hkc-xs-10, .hkc-xs-11, .hkc-xs-12 {	float:right; }
	}
}

@media (min-width:768px) {
	.hkc-sm-1, .hkc-sm-2, .hkc-sm-3, .hkc-sm-4, .hkc-sm-5, .hkc-sm-6, .hkc-sm-7, .hkc-sm-8, .hkc-sm-9, .hkc-sm-10, .hkc-sm-11, .hkc-sm-12 { float:right; }
}
@media (min-width:992px) {
	.hkc-md-1, .hkc-md-2, .hkc-md-3, .hkc-md-4, .hkc-md-5, .hkc-md-6, .hkc-md-7, .hkc-md-8, .hkc-md-9, .hkc-md-10, .hkc-md-11, .hkc-md-12 { float:right; }
}
@media (min-width:1200px) {
	.hkc-lg-1, .hkc-lg-2, .hkc-lg-3, .hkc-lg-4, .hkc-lg-5, .hkc-lg-6, .hkc-lg-7, .hkc-lg-8, .hkc-lg-9, .hkc-lg-10, .hkc-lg-11, .hkc-lg-12 { float:right; }
}
@media (min-width:1200px) and (max-width:1600px) {
	.hkc-lg-clear { clear:right; }
}
@media (min-width:1600px) {
	.hkc-xl-1, .hkc-xl-2, .hkc-xl-3, .hkc-xl-4, .hkc-xl-5, .hkc-xl-6, .hkc-xl-7, .hkc-xl-8, .hkc-xl-9, .hkc-xl-10, .hkc-xl-11, .hkc-xl-12 { float:right; }
}
from the file media/com_hikashop/css/rtl.css and it will work properly.
We'll add that on our end too.

The following user(s) said Thank You: usyuse

Please Log in or Create an account to join the conversation.

  • Posts: 7
  • Thank you received: 1
5 years 5 months ago #307183

thank you for your reply and help.
It worked like a miracle.
Important: there is an extra bracket ( } ) in your code ( line 5) and should be deleted.

But another problem seems to exists:
The quantity field is very small for the numbers and plus-minus buttons are flying away in RTL mode.


Regards.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
5 years 5 months ago #307206

Hello,

Thanks for your feedback on the RTL mode, I start to work on this, in order to upgrade the rtl.css, I can suggest you to add this on your
rtl.css file (in YourWebSite\media\com_hikashop\css)

Add this code :

#hikashop_order_main .hikashop_order_right_part,
#hikashop_order_main .hikashop_order_left_part {
float: left;
margin-top: 5px;
}

#hikashop_order_main .hikashop_order_left_part {
clear: left;
}

.hika_toolbar .hika_toolbar_btn.hika_btn_32 {
float: left;
}

You can add this at the end of your file.
For your specific quantity filed issue can you provide an Url link because on my side I have this, so basically nothing seems wrong on my localhost.



If you have any other issue with Rtl continue to inform us for rtl.css improvement, as it isn't easy to test everything...many thanks !

Regards

The following user(s) said Thank You: usyuse

Please Log in or Create an account to join the conversation.

  • Posts: 7
  • Thank you received: 1
5 years 5 months ago #307280

hello and thank you for your reply
I added it but nothing changed. maybe it is a case with my template. I'm using helix 3.

this is the url:
classtop.ir/index.php/shop

another case (as you will see in the url) is that in small desktops and tablets, instead of resizing the images, it crops some of my pictures.
I don't know if I have to resize all of my images?!

this is the sizes advised by my theme provider:



kind regards.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
5 years 5 months ago #307305

Hello,

I will Answer you step by step :
"hello and thank you for your reply I added it but nothing changed. maybe it is a case with my template. I'm using helix 3."

Check 2 solutions :
1. You can add to your css command some "!important" to increase cascade priority, like this by example :
Ex :
#hikashop_order_main .hikashop_order_right_part,
#hikashop_order_main .hikashop_order_left_part {
float: left !important;
margin-top: 5px !important;
}
2. Check that you add your css command in your rtl.css



"another case (as you will see in the url) is that in small desktops and tablets, instead of resizing the images, it crops some of my pictures.
I don't know if I have to resize all of my images?!

this is the sizes advised by my theme provider:"

You don't have to resize yourself, but I use your Url link and wasn't able to see your cropped image issue, can you precise a precise example in order to better understand the context.

Awaiting news from you
Regards

Last edit: 5 years 5 months ago by Philip.
The following user(s) said Thank You: usyuse

Please Log in or Create an account to join the conversation.

  • Posts: 7
  • Thank you received: 1
5 years 5 months ago #307324

hello Philip
thank you. The second codes with "important" worked!. I do appreciate that.

for the image issue, as I told you, it ONLY happens on small desktops (macbook 13" or Ipad 10" and other 10 inch tablets ONLY landscape mode).
on other devices it works perfect.




Kind regards
Yousef.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
5 years 5 months ago #307339

Hello,

It seems that you have a Css command, that won't allow the HikaShop css to work, see my screenshot



By removing this specific Css command from your template everything works as expected.
Regards

Last edit: 5 years 5 months ago by Philip.
The following user(s) said Thank You: usyuse

Please Log in or Create an account to join the conversation.

  • Posts: 7
  • Thank you received: 1
5 years 5 months ago #307521

Hello Philip
thank you for your great help.
I couldn't find the exact codes in the template but I wrote some lines in my custom.css to make the width auto. and it worked.!
you helped a lot.

best regards.
Yousef.

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

Time to create page: 0.097 seconds
Powered by Kunena Forum