Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 12, 2014 at 5:14 am #367130
    1lizcollins

    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

    December 12, 2014 at 9:34 pm #367504
    Elliott

    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

    December 12, 2014 at 9:59 pm #367515
    1lizcollins

    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

    December 12, 2014 at 10:21 pm #367522
    1lizcollins

    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!

    December 15, 2014 at 3:56 pm #368310
    Yigit

    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

    December 19, 2014 at 4:13 pm #370601
    1lizcollins

    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!

    December 20, 2014 at 5:51 am #370910
    Josue

    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

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