Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #26034

    On iPad, portrait view, the website has overlapping. 1: The logo and the menu items. 2: The text in the promo box and the promo box button. How can this overlapping be removed for only iPad portrait, or at least iPad?

    #129062

    Hi,

    Edit js > avia.js, find this code

    if(first_level_items > 8 && !bottom_menu)
    {
    switchWidth = 989;
    header.addClass('mobile_menu_tablet');
    }

    Replace the first_level_items with lesser digit. Something like this

    if(first_level_items > 5 && !bottom_menu)
    {
    switchWidth = 989;
    header.addClass('mobile_menu_tablet');
    }

    Can you give us a link to your website?

    I’ll tag Devin.

    Regards,

    Ismael

    #129063

    When i change the digit to a smaller digit. the menu dissapears when i make the site smaller.

    I looked in the css code and maybe i found a solution. when the menu is over the logo i can change the padding of the menu items in the tablet view.

    from 10px to 4px. Do you know how i can overrule this? I placed the original code under it. Its in layout.css on line 2687

    media=”screen”

    layout.css:2685@media only screen and (max-width: 989px) and (min-width: 768px)

    .responsive .main_menu ul:first-child > li > a {

    padding: 0 10px;

    #129064

    Fixed it.

    add this to your quick CSS settings:

    .responsive .main_menu ul:first-child > li > a { padding: 0 4px !important; }

    you can change the 4px for your desired setting.

    #129065

    hmm, no. it also has this option when i make the site bigger. do i have to ad a “media” selector to it? how do i do that?

    media=tablet ? then apply the css code.

    #129066

    Hi henryd,

    If we can see the site live we can assist with some css changes. There are also some pre done media queries in your custom.css file which you can make use of to have the css above only effect tablet sizes but in general what the change *should* be doing is switching your responsive menu in earlier so the padding hack isn’t needed.

    Regards,

    Devin

    #129067

    That change only made the navigation menu disappear on the iPad.

    Is there a way I can post a private reply?

    #129068

    Hi,

    That is correct, you can change the padding on mobile view. You can do something like this on your custom.css or Quick CSS

    /*
    Mobile Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

    @media only screen and (max-width: 1024px) {
    .main_menu ul:first-child > li > a {
    padding: 0 7px;
    font-size: 11px;
    }
    }

    Regards,

    Ismael

    #129069

    Is there a way I can post a private reply? Still waiting for an answer on that so I can provide more information.

    #129070

    I still need a solution to my original post please!

    #129071

    On iPad, portrait view, the website has overlapping. 2: The text in the promo box and the promo box button. How can this overlapping be removed for only iPad portrait, or at least iPad?

    #129072

    Hi,

    I’ll tag Kriesi. I think the issue occurs when you suddenly rotate the iPad on portrait view without refreshing the page.

    Regards,

    Ismael

    #129073

    OK. I look forward to the solution.

    #129074

    We don’t have private posts or support available but you can use things like http://goo.gl/ to hide URLs and make them temporary.

    What it sounds like is that the menu you have is a bit wider than typical or has more items but doesn’t meet the default number to switch the menu at a higher resolution width.

    Seeing the site live and inspecting what you have exactly is the best route to find a solution.

    Regards,

    Devin

    #129075

    Thanks! You can take a look here:

    http://goo.gl/wnu1uy

    The text currently has soft returns entered so that the text didn’t overlap the box in standard desktop view. Please advise.

    #129076

    Hi,

    I visited the website, looks like you manage to use Media Queries to adjust the menus.

    Regards,

    Ismael

    #129077

    The menu issue has been resolved. Please provide solution ASAP to my 2nd issue: On iPad, portrait view, the website has overlapping of the text in the promo box and the promo box button. The text currently has soft returns entered so that the text didn’t overlap the box in standard desktop view, but it still overlaps in iPad portrait view. How can this overlapping be removed for only iPad portrait, or at least iPad?

    Please, it’s been two weeks, I really need a solution for this promo box issue.

    #129078

    Hey!

    Please add following code into the quick css field

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .avia-promocontent {
    width: 45%;
    }
    }

    Best regards,

    Peter

    #129079

    Thank you so much! I’ll see if that solves it.

    #129080

    Hi!

    I hope it worked out?

    Regards,

    Peter

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

The topic ‘Ipad portrait view – overlapping logo and promo box’ is closed to new replies.