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

    Hello,

    My site looks great on my iPhone & desktop, but on the iPhone mini there are several issues:

    In horizontal orientation:
    1. Menu items overlay the logo
    I would like to show the mobile menu, and I have already selected “show mobile menu on smartphones & tablets”. What else can I try?

    In vertical orientation:
    1. 1/3 page icon list title text gets cut off on the home & contact pages
    2. 1/5 page icon box header text gets cut off on program page (see right-hand box)
    3. Sidebar links get cut off on programs pages, nitty gritty page, single portfolio pages, blog & single post pages.
    4. Email address gets cut off in icon list on contact page

    #367504

    Hi 1lizcollins!

    1. Add this to your custom CSS.

    @media only screen and (max-width: 1167px) {
    #advanced_menu_toggle {
        display: block !important;
    }
    nav.main_menu {
        display: none !important;
    }
    }

    For the icon issues I’m not sure what a good workaround for that would be. Would you like to hide the icons? I think it should display fine if you have them floating to the left instead of right.

    Regards,
    Elliott

    #367515

    Thanks Elliott. You guys are so awesome! That fixed the menu issue. I think the best fix would be to force the icon boxes to stack vertically rather than try to squeeze three side by side in this size, as that layout looks great on my iphone. Is there any way to force them to stack on the iPad mini size screen, in both horizontal & vertical views? I’d like to keep those icons if I can :)

    One other issue I noticed: the website’s background image is visible in the horizontal orientation on the iPad mini, but it is unrecognizable. It’s as if it’s using a very poor quality image. How can we make it look more like what I’m using on the desktop version?

    Thanks again,
    Liz

    #367522

    Hey Elliott,

    Unfortunately that code solved the menu issue on my iPad but it made the desktop version of the site narrower than I had set it to be. On my 21.5 inch screen the content area normally displays at 1366 pixels, with your code it was several hundred less. I’ve removed the code as I don’t want the site appearing narrow on larger screens, can I increase that mix-width value? Or is there anything else I can try? Thx!

    #368310

    Hey!

    Please try adding following code to Quick CSS

    @media only screen and (max-width: 1165px) and (min-width: 990px) {
    .av-main-nav > li > a { padding: 0 4px; }
    strong.logo { width: 20%; }}

    Regards,
    Yigit

    #370601

    Thanks Yigit, I’ve added that code. I don’t have an iPad handy to check it, but will let you know how it looks shortly.

    In the meantime, any word on how to address the other issues:

    1. Email address gets cut off in icon boxes (perhaps force the icon boxes to stack at a larger screen width?)
    2. Poor quality background image.

    I’d like to get this resolved asap.
    Thank you!

    #370910

    Hey!

    Try adding this code to the Quick CSS:

    @media only screen and (max-width: 1024px) {
    .iconlist_content a {
        word-wrap: break-word;
    }
    .avia-ipad .bg_container{
       background-size: contain !important;
       background-repeat: repeat  !important;
    }
    }

    Cheers! 
    Josue

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.