Home / Forums / DynamiX Support / iPad view is broken

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts

  • Steven Ready
    Participant

    Hi Guys,

    I am customising a site for a client using the Dynamix template and I am having issues with the navigation displaying properly on the iPad (Safari/Chrome).

    Using your instructions, I have deactivated the mobile navigation and have enforced the desktop navigation bar be displayed on tablet devices. I did this using the following instructions posted on Jan 7: Remove Mobile Navigation >

    ===========================================================================================================
    Edit Dynamix/stylesheets/responsive.css and remove the following CSS:

    @media only screen and (min-device-width: 481px) and (max-device-width: 980px) and (orientation:portrait) {
    #nv_selectmenu { display:block !important; }
    #dyndropmenu { display: none !important; }
    #header #nv-tabs { float:none !important; }
    }
    @media only screen and (min-device-width: 481px) and (max-device-width: 980px) and (orientation:landscape) {
    #nv_selectmenu { display:block !important; }
    #dyndropmenu { display: none !important; }
    #header #nv-tabs { float:none !important; }
    }
    @media only screen and (max-width: 767px) {
    #nv_selectmenu { display:block !important; }
    #dyndropmenu { display: none !important; }
    #header #nv-tabs { float:none !important; }
    }

    NOTE: I also added…
    @media only screen and (max-width: 1280px) and (min-width: 768px) { .mobilemenu-init { display: none !important; }
    because the mobile menu icon was still visible with the full navigation bar.

    ===========================================================================================================

    I have also added some custom elements to the header (couple of href links and a Google Translate widget). I actually had this all working fine at one point. The site looked great. Then I added some custom css for the mobile view (Theme Options > Customize) got this all working on iPhone and Samsung Galaxy. But when I went back to look at iPad view over the weekend – it had changed.

    So naturally the first thing I did, was remove all Mobile Customize CSS (my intention was to slowly add bits to see what was causing the issue). But when I removed ALL the css, the ipad view did not change!!! So not related to the mobile css?!

    The weird thing is, the layout has only changed on the iPad in both Safari and Chrome (portrait/landscape). With the Mobile CSS applied in Theme Options, the layout displays correctly on Galaxy Tab (portrait/landscape) and in a browser window (resized to 768px). So I don’t get it? If it works in the others, why would it be broken on iPad? Is this a common responsive issue that I am just not experienced enough to know?

    This is what is happening on iPad >
    – Navigation Bar (#nav-tabs) is positioned about 20px higher than it should be (covering my custom elements in the header).
    – Also, the logo is displaying at half the size but appears full size on the Galaxy Tab/Desktop resized window (?).

    I’m stumped???

    I am trying to track back and remember what I changed between getting the Custom CSS (Theme Options) working on Desktop, iPad and Galaxy Tab and when I added the Custom Mobile CSS.

    Argh! It’s like a needle in a hay stack. Have you had anything like this before? Would appreciate any advise or suggestions on what might be cause the issue.

    Happy to share details if you need.

    Bex

    Ps. Would be AWESOME if we had a Custom CSS for tablet in the back end of the Theme System.


    Tom ( Support)
    Keymaster

    Hi Bex,

    I am not to sure what is happening here, please set your reply to private and provide your URL/login details so I can take a further look for you.

    The Mobile CSS section covers the tablet also under Appearance > Theme Options > Customize > Mobile CSS.

    Kind regards,
    Tom


    Steven Ready
    Participant
    This reply has been marked as private.

    Tom ( Support)
    Keymaster

    Hi Bex,

    Thank you for this, Andy (theme creator) is looking into this and will get back to you by this time tomorrow.

    Kind regards,
    Tom


    Tom ( Support)
    Keymaster

    Hi,

    I am testing this on my iPad and it comes up with the desktop menu as you have told the code to do so. I am not sure what the problem is here now? Can you please provide a screenshot of your iPad to see what the issue is?

    Thanks,
    Tom


    Steven Ready
    Participant
    This reply has been marked as private.

    Tom ( Support)
    Keymaster
    This reply has been marked as private.

    Steven Ready
    Participant
    This reply has been marked as private.

    Steven Ready
    Participant
    This reply has been marked as private.

    Steven Ready
    Participant

    Hi Guys,

    Just wondering if this ticket is still active? As per my last post, this issue is actually not resolved — there are display discrepancies between iPad2 and iPad3. The screen grabs Tom has provided are from iPad2, and I can confirm that all my friends with iPad2 see the same thing. However, all my friends who have iPad3 are seeing what I am seeing – broken 🙁

    Can this be fixed or should I be looking at a new header layout? We are about to launch the site next week so you can imagine our client is a growing anxious.

    Appreciate a response – good news or bad. Just have to action something.

    Cheers!


    Tom ( Support)
    Keymaster

    Hi Steven,

    Very sorry about the reply, I must have missed your last answer. I appologise!

    I see what the issue is now. The iPad 3 and beyond features a retina screen. You can set the logo to be a set size on a retina device, hence why the logo is smaller.

    As for the gap between the header and gallery, the background image you have set (the blue one) is a set height. On the retina display, the pixels are much more so the screen is wider. If the image is a set height, obviously the longer the screen the less will be shown. The gap is not a bug, but just the image in the background not being tall enough.

    I have increased the size of your logo and that now shows the translation box etc. It was capping it before.

    I hope this helps you out.

    Kind regards,
    Tom

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

You must be logged in to reply to this topic.