RTL Problem with mobile - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
October 13, 2018 at 1:19 pm #1021042

kasem-online
Participant

hello enfold team , I hope you have a good day

I have website in Both English & Arabic using WPML
I have a problems on RTL version of website
– First one is in menu on mobile
I Put The logo on the right , but the menu icon appear over the logo …
not only the menu , also the search icon appearing over the logo …
I want menu button and search icon on the left and the logo on the right ….
also I Want to disable social icons in mobile version

this is the photo of website on mobile in English which is perfect ….
http://www.ninargrill.com/wp-content/uploads/2018/10/ninar-en.png
this is the photo of website on mobile in Arabic which is the problem
http://www.ninargrill.com/wp-content/uploads/2018/10/ninar-ar.png

the website is : http://www.ninargrill.com
arabic version is : http://www.ninargrill.com/?lang=ar

October 17, 2018 at 12:43 pm #1022734

Günter
Keymaster

Hey kasem-online,

Thank you for using Enfold.

I checked your link on laptop with small screen and on android – looks good.

View post on imgur.com

Did you solve the problem?

Best regards,
Günter

October 17, 2018 at 4:07 pm #1022835
kasem-online
Participant
well sir … partly i found a solution on forum and use this in this quick CSS
```
@media only screen and (max-width:767px) {
  .responsive #top.rtl #wrap_all .main_menu {
    left: 0;
  }

  .responsive #top.rtl #wrap_all .main_menu .avia-menu.av-main-nav-wrap.av_menu_icon_beside {
    border-left: 0;
    border-right: solid 1px #e2e2e2;
    margin-left: 0;
    margin-right: 25px;
    padding-left: 0;
    padding-right: 25px;
  }

  .responsive.html_cart_at_menu #top .main_menu .menu>li:last-child {
    margin-right: 0;
    padding-right: 0;
  }
}
```
but i still have some problems on this site … I Want to disable social Icons from Header …
In desktop version , I set the social Icons on the top bar and make them in white color and that’s very good
but as you see , in mobile version they appear in white space next to the menu icon after the search icon with that Ugly separator
I Want to disable the separator and social Icons on HEARER in mobile version at all

Also , I Have a problem in photo slider as you see below the header ( on mobile version )…

in English version , I set the high of slider is 300px, and the slider crop the photos in very perfect way
in Arabic Version (RTL) : when I set the high of slider ( any value) , it isn’t show the whole photo , there is a problem like in this sample …..
http://www.ninargrill.com/wp-content/uploads/2018/10/ninar-ar.png

Thank you in advanced, and so sorry for my bad english …

PS : I Use Enfold 3 years ago till now , and I Have a lot of problems on RTL Issues also, and I Post some of it in other posts,

Thank You
October 18, 2018 at 5:26 pm #1023501
Victoria
Inactive Moderator
Hi kasem-online,

Here is the code to remove the separator, you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (max-width: 767px) {
  .responsive #top.rtl #wrap_all .main_menu .avia-menu.av-main-nav-wrap.av_menu_icon_beside {
    border: none;
  }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
October 22, 2018 at 4:52 pm #1024981
kasem-online
Participant
thank you so much … it works :)
but also I have a problem with Slider in RTL Version , when i set (Slider minimum height) , it doesn’t show the whole photo , it showing part of photo and white space like the photo i posted before
- This reply was modified 6 years, 1 month ago by kasem-online.
October 24, 2018 at 3:27 pm #1025933
Victoria
Inactive Moderator
Hi kasem-online,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (max-width:767px){
    #full_slider_2, 
    #full_slider_2 .av_slideshow_full.avia-slideshow,
    #full_slider_2  .avia-slideshow-inner,
    #full_slider_2 .avia-slideshow li,
    #full_slider_2 .avia-slideshow li img {
      min-height: 200px;
    }
    #full_slider_2 .avia-slideshow li img {
      width: 150%;
    }
    .slideshow_inner_caption {
        height: 36%;
        top: 10%;
    }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.