Home Forums Weaver Xtreme Theme How to target iPad Portrait Orientation?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #17511
    Gillian
    Moderator

    On this site I have a donation button at the top right (in the pre-header area).

    I want to hide the button on any device “smaller” than an iPad in landscape orientation.  I have given the button a class (cta) and, in my CSS, by combining this with .is-mobile the button doesn’t display on phones – so far, so good :-).
    For the ipad, if I use .is-ipad with .cta – the button is not displayed in either portrait or landscape orientation, as expected.  However, while I don’t want the button displayed in portrait orientation (because there really isn’t room for it, and I don’t particularly want to make it smaller to fit), I do want the button displayed in landscape orientation where there is room for it.  I tried using .is-smalltablet but the button displays in both orientations.
    So, getting back to my question, how can I target just the iPad in portrait orientation with my “display: none” CSS?  I guess I need to use an @media query?
    #20803
    scrambler
    Moderator

    Yes get rid of the rules with .is-xxx ,and use an @media query instead and find the threshold value that works

    @media only screen and (max-width:780px) {
    .cta {display:none;}
    }

    If needed there is also a way to differentiate landscape and portrait with media query, but the width should be sufficient.

    #20804
    Weaver
    Keymaster

    It is possible to add orientation to @media rules.

    And you could use .is-ipad inside an @media for additional control.

    #20805
    Gillian
    Moderator

    Hi @scrambler and @weaver

    Many thanks for the @media lessons – I knew it was time I learnt how to use them 🙂
    I ended up retaining my .is-mobile CSS, and then separately adding an @media query using the orientation rule. The @media width rule that scrambler gave worked fine on the iPad and iPhone, but I like the simplicity of “orientation” – it is easy to remember what the CSS does, and I don’t have to keep width numbers in my head 🙂
    On a related topic – I have a lot of different menus on the site, and some of them (the ones with more options) wrap to a second line in portrait on the iPad.  Is there a rule I can use so that the mobile hamburger will display instead for these pages, but only in portrait orientation?  One example is this page.
    Many thanks.
    #20806
    scrambler
    Moderator

    Right now there is no way to trigger the mobile menu completely on demand, but weaver added the threshold option box that you can use to make the menu switch to mobile at a wider smaller width than 768 which is the default threshold. (edit by weaver)

    The option is in the Menu options towards the bottom.

    The other solutions is to use CSS to make menu labels fit using font size, padding. There may even be a way to make labels changes to shorter ones using before or after selectors, I can explore that if you need.

    #20807
    Weaver
    Keymaster

    @scrambler – I think you got the mobile menu threshold backwards.

    The option lets you change the mobile menu threshold to be LESS THAN 768. Anything wider than 767 ( >= 768 ) must always be the standard menu. This includes iPads and other tablets wider that 767. The value of this option is to display the regular menu bar for menus without many items on mobile devices.

    Thus, and I see no available solution for this in the future with standard Weaver Menus, Weaver Xtreme is hardwired so that the menu bar will always be the full menu bar for iPads.

    There is a new menu option coming for X-Plus soon, and its switch to mobile menu is not controlled by JavaScript like the default Weaver menu system. Thus it should be possible to adjust the switch threshold more specifically for iPads with plain CSS – but this has not been tested.

    #20808
    scrambler
    Moderator

    OOPS sorry, Brain Freeze….

    Let us cross our fingers for the new menu, that would be a definite plus for it as it seems to be a frequent request.

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