Problems on Mobile Devices

- 9 years, 2 months ago Gulriz
  Participant
  
  Expired
  
  Hi,
  
  I’ve just created my website with your theme. First of all, I want to thank you for such a great support forum. I’ve found and used so many useful tips and css codes. However still I have some problems with the mobile version.
  
  1. I used revolution slider on my website. There is no problem when I use a computer. But I can not see the slider on mobile devices (neither phone, nor tablet)
  
  2. When I use the tablet horizontally, the position of the menu items are a big problem. I have some examples
  
  The menu is overlap with the header
  
  The menu is below the logo (it should be at the same line with logo)
  
  The menu is overlap with the google map
  
  3. In some pages, I want to use photos (image gallery element) centered vertically. For example at this screenshot, the picture aligned top of the column, but i want it to align centered of the column.
  
  4. In some pages, I hide some columns for phone and vertically used tablet. I’ve no problem on iPhone but on iPad (vertical use), I see there is a blank column at the right side of the screen.
  
  How can I remove this blank column and see the content at whole screen?
  
  I checked this situation with samsung mini tablet, it has centered the content, which is ok for me.
  
  5. Also on iPad (vertical use), the logo is centered. I want it to align right.
  
  6. One other problem is second and third level menu items at mobile version. I want a little more indentation before the third level menu items. At the screenshot below, “Organizasyonel Yapılanma ve İş Tanımlarının Hazırlanması”, “Performans Yönetimi”, “Ücret ve Yan Haklar Yönetimi” are the submenu items of “İnsan Kaynakları Danışmanlığı”. But at the first sight, the indentation is not noticable, so it looks like all in the same level.
  
  7. There is a problem with header on iPhone and vertical tablet use. I can not see the whole header on the screen, sometimes just one word or sometimes a couple of words are visible. It is because of the row length of the mobile devices but I think it should be possible to use smaller fonts or more than one line. In the screenshot below, you can see the page header as just “ORGANİZASYONEL” but it should be “ORGANİZASYONEL YAPILANMA VE İŞ TANIMLARININ HAZIRLANMASI”.
  
  8. My last question is more complicated. When I checked the website at Samsung mini tablet, I see a problem which I didn’t face at other mobile devices. At this device, I have a Turkish character problem on some headings (but it is only on some headings). For example, on the screenshot below, the typing of the word of “PRENSİPLERİMİZ” is correct at the first heading (ÇALIŞMA PRENSİPLERİMİZ) but it is wrong at the other headings (DANIŞMANLIK PRENSIPLERIMIZ and EĞITIM PRENSIPLERIMIZ).
  
  I really apologize for my long questions but I appreciate your help
  
  Thank you very much,
  
  Gulriz
- 9 years, 1 month ago Mirela
  Participant
  
  Hello,
  
  Thank you for choosing our theme!
  1-Please make sure to have enabled the revolution slider to display in mobile. Find the option in Revolution Slider > slider settings > Layout & Visual > Mobile, set it OFF (screenshot)
  
  2-I can’t see the images attached, but i assume is a conflict of the menu width, with the top header width in landscape mode.
  Please send us your site’s url so we can give a more precise answer for all the other questions.
  
  Best regards!
- 9 years, 1 month ago Gulriz
  Participant
  
  Expired
  
  Hello,
  
  Thank you for your quick reply.
  
  The url of my site is: http://www.pharus.com.tr
  
  If it will be helpful for you, i can resend the images. Plase just let me know how to send them
  
  Thanks again
- 9 years, 1 month ago Mirela
  Participant
  Hello,
  
  2- Please add the following code into your custom css box:
  
  @media (max-width: 1100px) and (min-width: 981px) { nav .menu > li { margin-right: -9px !important; margin-left: -12px !important; } }
  
  -Please update theme. You have an older version of the theme. The issue 3 and 4, do not happen on our side.
  
  5- Please add this code into your custom css box:
  
  @media (max-width: 979px){ #logo { left: 78% !important; } .menu-small ul.menu > li > ul > li > ul > li > a { padding-left: 17% !important; } }
  
  6- Add this code:
  
  @media (max-width: 480px){ .menu-small ul.menu > li > ul > li > ul > li > a { padding-left: 17% !important; }}
  
  7- Please add this code:
  
  @media (max-width: 480px){ .header_page h1 { line-height: 35px;} .header_page.normal h1 { font-size: 16px;} } @media (max-width: 979px) { .header_page h1 { line-height: 95px;} .header_page.normal h1 { font-size: 19px;} }
  
  Please do the above changes, update theme and Visual Composer and let us know what else there is to edit.
  
  Best regards!
- 9 years, 1 month ago Gulriz
  Participant
  
  Expired
  Thank you for your quick reply. I’ve just updated the theme but when I look at plugins page, it says that I have the version 4.7 of WPBakery Visual Composer. When I want to download the version 4.7.4, it costs $34. So I couldn’t update the visual composer.
  
  The problems number 4, number 7 and number 8 is still continuing.
  
  Problem number 4 was about the visibility of hidden columns. For example when I open this url (https://www.pharus.com.tr/insan-kaynaklari-danismanligi/performans-yonetimi/) with an iPad (vertical use), I see a blank column at the right side of the screen.
  
  For the problem number 7, I’ve added the code which you have given, but there is no change. Still I couldn’t see the whole header on iPhone and iPad (vertical use). For example when I open this url (https://www.pharus.com.tr/insan-kaynaklari-danismanligi/insan-kaynaklari-prosedur-ve-formlarinin-yapilandirilmasi/), the title should be “İNSAN KAYNAKLARI PROSEDÜR VE FORMLARININ YAPILANDIRILMASI”. However, when I open on iPhone, I just see “İNSAN KAYNAKLARI”; when I open on iPad (vertical use), I just see “İNSAN KAYNAKLARI PROSEDÜR VE FORMLARININ”
  
  Problem number 8 was about the Turkish character problem on android devices
  
  My last question is about the front page. I used 4 service square in the front page. But I want all the titles of the service squares in the same line; all the pictures of the service squares in the same line; all the content in the same line and finally all the button below the service squares in the same line in all kind of screen width
  
  Thanks again for your help. I really appreciate your reply.
  
  Best regards
- 9 years, 1 month ago Mirela
  Participant
  
  Hello,
  
  Please send us your wp credentials in a private reply, so we can give these a closer look.
  
  Best regards!
- 9 years, 1 month ago Gulriz
  Participant
  
  Expired
  
  This reply has been marked as private.
- 9 years, 1 month ago Mirela
  Participant
  
  Hello,
  
  For the problem 4 and 7 i edited and organized the css in your custom css box and now they are ok. Please check and let us know.
  8- I opened the site from a Samsung Galaxy S4 device and this is what i get: screenshot. The first character does display as it is.
  9- Services in home page. I edited the css and added this new class:.align_button { padding-top: 24px;} in your home page custom css section , but please keep in mind that this kind of customizations are not included in theme support.
  
  Best regards!
- 9 years, 1 month ago Gulriz
  Participant
  
  Expired
  
  Hello,
  
  I’ve just checked the problem fields, everything is okey except service squares. I will try to solve this problem by another way.
  
  Thank you very much for your great support. I really appreciate your help.
  
  Best regards