Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #1320455

    Hi there,

    When my website is viewed on an iPhone/iPad on Safari browsers (or even Chrome), the following issues occur:

    -Menu not showing
    -Some heading text is showing as striked out, but after I zoom in/out it shows fine
    -Home page coming up as blank on some devices
    -Headline ‘Our Lawyers’ on the LayerSlider not coming up over pic
    -The logo ‘icon’ on the ‘tab’ is very pixellated

    Please assist. Thank you.


    Hey QuantumPhysics,

    Thank you for the inquiry.

    We are able to reproduce the menu issue on a Simulator but not the others as shown in the screenshot below.


    Adding the following css code should fix the menu issue.

    .html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a .avia-menu-text {
        color: #333333;
        display: block !important;

    Best regards,


    Thank you.
    For the other issues, can you check on an actual iPad or iPhone with latest OS? I checked it on a simulator as well and it’s working fine but on an actual iPad / iPhone the error show up. I can provide screenshot if needed.

    Other issues are:
    – the footer doesnt load on iPhone/iPad.
    – Contact page not showing the hotspot text.



    -Some heading text is showing as striked out, but after I zoom in/out it shows fine

    We are able to reproduce the heading issue on an iPad Pro 1st gen simulator. Try this css code to prevent the heading within the text block from getting cut off.

    .avia_textblock {
        overflow: visible !important;

    Have you tried using the Special Heading element instead of manually adding the heading inside a text block?

    The items in the default menu is still not visible on iPad Pro. You may need to add this css code to fix it.

    .av_seperator_small_border .av-main-nav > li > a > .avia-menu-text {
        display: block !important;

    Did you adjust the transition settings of the layer slider heading? We can see the issue on the simulator but we cannot figure out why it shrinks. Have you tried adding a minimum height to the layer?

    Best regards,


    We are having all sorts of issue when viewed from Apple devices… After adding the codes above, now the Make a Payment page is not showing any text on the body and on the buttons.. :(

    What’s weird is that it works perfectly fine on my Windows 10, and Samsung Note 10.

    After adding the codes above, now my main menu has that tall grey lines dividing each menu items on all devices.

    Footer area still doesn’t load properly on Apple devices.


    Found the issue! It was the custom font I imported. Switched it to default font and all is working fine now!



    Great! Glad to know that it is working correctly now. Please feel free to open another thread if you need anything else.

    Have a nice day.

    Best regards,

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

The topic ‘Several issues when viewing website on iPhone, Safari, and iPad Chrome/Safari’ is closed to new replies.