WPML doesn't show in mobile - Support | Kriesi.at

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

Author

Posts
September 23, 2016 at 12:40 pm #690663

Sadegh
Participant

Hi
WPML language tab doesn’t show up in mobile and tablet mode of the website (link in private area)

Let me know please how may I fix that?

Regards,
Sadegh

September 27, 2016 at 12:55 pm #692199

Yigit
Keymaster

Hey Sadegh,

It does not show up on my end on desktop as well. Where would you like to display it? And can you please create a temporary admin login and post it here privately?

Best regards,
Yigit

September 28, 2016 at 4:36 pm #692805

Sadegh
Participant

Hey dear Yigit,

– Could you please check that again (I had to remove the plugin due to our host issues, but now it works fine)
– In both Mobile and Tablet mode, I would like to display the languages besides the menu square (as it has illustrated below)

+ It seems that Tablet menu doesn’t look like as same as Mobile menu. I don’t know why, but I wonder how could I make Tablet mode exactly looks like Mobile menu.
+ You may find the credentials in private area.

September 30, 2016 at 6:18 am #693531
Jordan
Inactive Moderator
Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
```
@media only screen and (max-width: 767px){
#header_meta .sub_menu {
    min-width: 560px;
    background: rgba(0, 0, 0, 0);
    padding-left: 0;
    padding-top: 0px;
    right: 30%;
    position: relative !important;
    top: 15px;
}
}

@media only screen and (max-width: 990px){
#header_meta {
    display: block !important;
    height: 0px !important;
    min-height: 0px !important;
}
}
```
Best regards,
Jordan
September 30, 2016 at 11:51 am #693616

Sadegh
Participant

Hi Jordan,
The code doesn’t work for me and the WPML language still doesn’t show up in both Tablet and Mobile mode.

Regards,
Sadegh

October 3, 2016 at 5:07 am #694404

Ismael
Moderator

Hi,

We added the css code in the English and Persian General Styling > Quick CSS field. Please remove browser or hard refresh the page.

Best regards,
Ismael

October 3, 2016 at 7:26 am #694463

Sadegh
Participant

Hi,

> Please change the code you used.
As it made the website looks wrong in Tablet mode. Here is the screen:

In mobile mode, the flags are not in center, anyway we could fix that?

> And also, let me know please what code did you used.

Regards,
Sadegh

October 5, 2016 at 5:21 pm #695646

Andy
Inactive Moderator

Hi,

I can’t find any flags on your website. Did you remove them again? Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

Best regards,
Andy

October 5, 2016 at 9:05 pm #695762

Sadegh
Participant

Hey dear Andy,
Yes, you are right (the flags are changed to the texts).
So let me give you a fresh look:

>> Here is the website in desktop mode: (which is totally fine with us)

>> Here is the website in tablet mode and mobile mode (where the problem is exists)
Tablet Mode:

Mobile Mode:

In both Tablet and Mobile mode, we would like to just see the language texts (English – فارسی), without seeing any search bar.

Regards,
Sadegh

October 6, 2016 at 1:57 pm #696023
Yigit
Keymaster
Hey!

Please add following code to Quick CSS
```
@media only screen and (max-width: 990px) {
#top #searchform {
    display: none !important;
}
#header_meta .sub_menu {
    min-width: auto;
}
}
```
Regards,
Yigit
October 6, 2016 at 2:15 pm #696036

Sadegh
Participant

Hey Yigit,

This is what happening after adding the code you gave for tablet and mobile mode:

>> Tablet mode:
– Is it possible to make the blue bar full width?

>> Mobile mode still doesn’t changed and the problem is still exist as before.

Kind regards,
Sadegh

October 8, 2016 at 5:50 am #696800
Ismael
Moderator
Hi!

We modified the css codes in the Quick CSS field.
```
#top .sub_menu > ul {
    float: right;
    margin-right: 20px;
}

.rtl .widgettitle {
    text-align: right!important;
    direction: rtl !important;
}

@media only screen and (max-width: 989px) {
  .responsive #top #searchform {
      display: none !important;
  }
  .responsive #header_meta .sub_menu {
      min-width: auto;
  }

  .responsive #header_meta {
      display: block !important;
  }

  .responsive #header_meta .sub_menu {
      background: rgba(0, 0, 0, 0);
      padding-left: 0;
      padding-top: 0px;
      position: relative !important;
  }

  #header_meta {
      margin-bottom: 30px;
  }

  .responsive #top #header_meta .container {
      background: #0077b4;
      width: 100%;
      max-width: 100%;
  }

  .responsive .avia_wpml_language_switch {
    height: auto;
  }

  .responsive #top .sub_menu li {
    line-height: 30px;
    top: -8px;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #header_meta {
    margin-bottom: 0;
  }

  #top ul.avia_wpml_language_switch li {
    top: 10px;
  }

  .responsive #top .sub_menu li {
    top: 0px;
  }

  .responsive #top .sub_menu a {
    top: 0;
  }
}
```
Cheers!
Ismael
October 8, 2016 at 5:26 pm #696908

Sadegh
Participant

Hi Ismael,

Thanks a lot for your very kind help, it works great now. Just it seems that 2 little issues left:

1- May I know if it is possible to align the WPML language texts in center intablet mode?

2- As I have illustrated in below image, WPML languages looks different in RTL mode (Persian/Farsi language). Any chance we could make them in center like the one shows in right side?

Regards,
Sadegh

October 10, 2016 at 1:21 pm #697287
Andy
Inactive Moderator
Hi,

try this code inside Quick CSS field:
```
@media only screen and (max-width: 1024px) and (min-width: 768px) {
.av_secondary_right .sub_menu {
right: 39%;
}}
```
and adjust as needed.

Best regards,
Andy
October 10, 2016 at 1:58 pm #697320

Sadegh
Participant

Hey Andy,

Thanks for the code.
However, the problem with mobile mode in Farsi page + (RTL mode) is still remains.

Regards,
Sadegh

October 10, 2016 at 5:26 pm #697485
Andy
Inactive Moderator
Hi,

use this inside your Farsi page:
```
#top .av_header_transparency #header_meta li {
left: 27%;
}
```
Best regards,
Andy
October 16, 2016 at 7:50 am #699458
Sadegh
Participant
Hi Andy,

Your code gets conflicted with the search bar, so I have removed it:

Regards,
Sadegh
- This reply was modified 8 years, 1 month ago by Sadegh.
October 17, 2016 at 12:44 pm #699923

Andy
Inactive Moderator

Hi,

this is what I see in table landscape mode:

English:
http://smrtshot.com/i/RlzL

Farsi:
http://smrtshot.com/i/RzOJ

They seem the same to me, so it seems fine to me now. Could you fix it already?

Best regards,
Andy

October 17, 2016 at 12:51 pm #699931
Sadegh
Participant
Hey Andy,

Uh, if you remember, the problem was with the mobile mode in Farsi pages. As I have already illustrated it in an image:

=
P.S> The last code you were kindly wrote for me (below code) didn’t work and caused a problem (I showed that in the image).
```
#top .av_header_transparency #header_meta li {
left: 27%;
}
```
=

Regards,
Sadegh
October 17, 2016 at 1:00 pm #699945
Andy
Inactive Moderator
Hi,

then use my code and add some media queries into, so it will work on mobile only:
```
@media only screen and (max-width: 767px) {
#top .av_header_transparency #header_meta li {
left: 27%;
}}
```
Adjust as needed.

Best regards,
Andy
October 17, 2016 at 1:08 pm #699950

Sadegh
Participant

Hey Andy,

Thank you however, it works only for the homepage, it doesn’t seems to be affected on the other pages in Farsi (in mobile mode).

Cheers,
Sadegh

October 18, 2016 at 11:00 pm #700934
Andy
Inactive Moderator
Hi,

add this as well:
```
@media only screen and (max-width: 767px) {
ul.avia_wpml_language_switch.avia_wpml_language_switch_extra {
margin-right: -100px !important;
}}
```
Best regards,
Andy
October 19, 2016 at 10:11 am #701092

Sadegh
Participant

Hi Andy,

I think this thread gets too long. I will open another thread to solve the left issue :)
Thanks for your time
(you may now close the thread please)

Regards,
Sadegh

October 19, 2016 at 1:51 pm #701295

Andy
Inactive Moderator

Hi,

alright. Thanks for this.

Best regards,
Andy
Author

Posts