Sidebar menu on iPad in landscape mode

Home Forums Premium WordPress Themes Seasonal Pro Sidebar menu on iPad in landscape mode

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2851
    Angela Dunsire
    Participant

    Hi,

    have the issue where the sidebar menu is not showing fully when an iPad is in landscape mode.

    The screen does not replace the menu with the responsive menu you have if you are in portrait mode on an iPad, or on say an iPhone, as a result when I open the sub-menu it only shows me the first 4 items and I am unable to scroll any further down on the sidebar content to show the rest of the menu.

    Can you advise?

    #2852
    ShapedPixels
    Keymaster

    are you able to provide a link to your site and I will take a look.

    #2853
    Angela Dunsire
    Participant
    #2854
    Angela Dunsire
    Participant

    Have had a similar issue with out theme menus when used on an iPad in landscape mode.

    #2855
    ShapedPixels
    Keymaster

    Thanks for the link…I just loaded your site in my iPad.
    Because Seasonal is a special theme due to it’s side column concept, anything in that area needs to be kept as little as possible. Originally this theme was meant to be more of a personal blog theme only. However, there are some things you can do to solve the issue you have when in landscape mode; here are a few options:

    [ul]
    [li]Make your logo a bit smaller, as it is a bit on the large size[/li]
    [li]Change the font size for your menu…you would be surprised how much space you can regain[/li]
    [li]If possible, make your menu items with less words for the ones that wrap to a second line[/li]
    [/ul]

    By the way, nicely done on the site, especially with the content background watermark image.

    #2856
    Angela Dunsire
    Participant

    Thanks Andre.

    As an alternative is it possible to amend the media query to bring in the mobile menu for the iPad in landscape mode?

    #2857
    ShapedPixels
    Keymaster

    that is one possibility. Changing the menu query size to switch to the mobile layout sooner which is currently set by default as:

    [code]@media (min-width: 992px) {
    }[/code]

    You could grab all the menu related elements from that set and add them to your own media query to react to maybe 1024px perhaps.

    #2858
    Angela Dunsire
    Participant

    Hi Andre,

    is it possible to simply amend the font sizes solely for the menu when it is in landscape mode on the iPad?

    #2859
    ShapedPixels
    Keymaster

    Technically it’s not possible to detect if a device is being held in a person’s hand either in portrait or landscape mode. Media Queries with pixel resolutions is how this is done, so if you change the font size for anything from 992px and up, this also will show when viewing on a desktop.

    I would recommend adjusting the font size overall for your menu from the typography settings in the customizer, and see how that works out first. I’d also recommend shrinking your logo down a bit more to gain some vertical space. You can do that either by resizing the logo image itself or using CSS to do a max-width: 80%; as an example.

    #2860
    Angela Dunsire
    Participant

    Thanks Andre.

    I’ve adjusted the font sizes and tweaked the padding and it works.

    Except that in doing this have discovered that when you use Firefox and you have a smaller screen (not iPad) the logo and the tag line actually overlap onto the white content area.

    This doesn’t happen on Chrome or Safari, just Firefox.

    #2861
    Angela Dunsire
    Participant

    Hi,

    narrowed down the issue to using a logo larger than 300px wide.

    Used a larger one so that it actually filled the sidebar from side to side as it’s a wider logo and needs the width rather than having the larger padding on both sides.

    #2862
    Angela Dunsire
    Participant

    Hi,

    fixed it by adding below text to custom css

    .header-image {
    overflow: auto;
    }

    Thanks for all your help. Really like the theme.

    #2863
    ShapedPixels
    Keymaster

    Overall, you are doing a good job with the theme and your site, especially being able to customize it.
    Regarding Firefox, the issue of images (usually in a div container) are not responsive. This has been a long time issue and Firefox has received many complaints over the years about this. The only work-around is using width instead of max-width: 100%

    But, using width: 100% in other browsers becomes a problem as the image will then stretch to fill whatever area it sits in. It’s a very difficult issue to work around. Firefox used to be the favored browser, but they’ve been plagued with many issues.

    However, it sounds like everything is working for you now, so that is what is important 🙂

    UPDATE: Regarding your logo and Firefox…this might be your better solution:

    [code].site-header img {
    width: 100%;
    }[/code]

    See how that goes for you in Firefox, but double check the other browsers if you can.

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