Instagram browser compatibility issue

Homepage Forums Free Support Forum Blackoot Lite Blackoot Lite Support Instagram browser compatibility issue

Note about WordPress 5.0:
Our themes are compatible with WordPress 5.0. However not all functionality are guaranteed to work as expected with the new editor (Gutenberg) that comes with 5.0.

We highly recommend installing the Classic Editor plugin, which will bring back the usual editor if you run into any issue or just do not like the new editor.

An update to bring full compatibility with Gutenberg is being worked on, but has been postponed because of the recent fast-paced evolution of the Gutenberg project until WP 5.0 release. More info about the release of WordPress 5.0 announced on a short 2-days notice can be found here: New 5.0 Target Date.

Instagram browser compatibility issue

This topic contains 24 replies, has 2 voices, and was last updated by  iceable 1 week, 6 days ago.

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #24624
    Instagram browser compatibility issue

    guidoxyz
    Participant

    Hi, I’m using Blackoot Lite for my site. It works great on Mac desktop and on Chrome and Samsung mobile browsers. However, I’ve just tried to put a link to my site from my Instagram page and its resulted in formatting problems when displayed on Instagram’s in-app browser. (I have tried it on several phones so its not handset-specific). Specifically 1). the font size of my page title is increased too large, resulting in ugly breaks in the middle of words and 2). the menu (which uses a simple 4-item menu the same as the desktop) is now split across 2 lines. The rest of the site looks ok-ish, but this is obviously a major issue as it looks really bad if people try to click through from my Insta page. I suspect there will be a similar problem when I link from Facebook too via their browser. Is there any custom CSS or other fix for this please?

    #24626
    Reply to: Instagram browser compatibility issue

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi, in-app browsers, especially those from social media apps, are notorious for behaving slightly differently from major browsers and which causes various such issues.
    Unfortunately there is no immediate fix I can provide you with just now, but we’ll make sure to investigate this and try to update this thread in the next few days.

    #24632
    Reply to: Instagram browser compatibility issue

    guidoxyz
    Participant

    Hi, is there any further update on this please? Failing other more comprehensive solutions, if there is some custom code fix to reduce the header font size on the Instagram/Facebook browser so the line breaks fall in the correct places that would help….

    #24669
    Reply to: Instagram browser compatibility issue

    guidoxyz
    Participant
    This reply has been marked as private.
    #24671
    Reply to: Instagram browser compatibility issue

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi, I sincerly apologise for the delayed response. Resources have been hogged by an update related to WP 5.5 compatibility and this thread sort of slipped through.

    Now I couldn’t reproduce the issue you described on a test site with this theme, and even your site seems to appear as expected in the instagram in-app browser on my end. It looks pretty much the same as it does in mobile chrome. (see screenshot in private reply below).

    #24672
    Reply to: Instagram browser compatibility issue

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!
    This reply has been marked as private.
    #24673
    Reply to: Instagram browser compatibility issue

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Fiddling around a little more, I managed to reproduce the behavior you described.

    To do so, I had to go into the phone’s accessibility settings, and set the font-size to “larger”.

    This instructs the phone to make every font larger than it is initially meant to by some %, and as a result font on your site look way too big.
    This is not a bug, but very much a feature working as designed.

    Now your site cannot force a phone to display the font at an arbitrary size with CSS.

    However, you can set a smaller “base” font size so that (base size + accessibility larger %) remains reasonable. Doing this requires caution, because phones without such setting enabled will show the site with the “base” font, so it must remain big enough.

    This custom CSS should help get the title and menu under control. This is not instagram specific, it will apply to all phone-sized screens but should help curb your issue:

    @media only screen and (max-width: 767px) {
        #logo .site-title {
            font-size: 30px;
        }
    
        #navbar ul li a {
            font-size: 11px !important;
        }
    }
    #24674
    Reply to: Instagram browser compatibility issue

    guidoxyz
    Participant
    This reply has been marked as private.
    #24676
    Reply to: Instagram browser compatibility issue

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Please have a look at my previous reply in case you missed it. I must have posted it while you were typing yours 🙂

    #24677
    Reply to: Instagram browser compatibility issue

    guidoxyz
    Participant
    This reply has been marked as private.
    #24678
    Reply to: Instagram browser compatibility issue

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Ah right, this seems to be a glitch on mobile. The search field becomes so small you can’t even see the “Search” placeholder.
    This will certainly need to be reviewed on our end.

    In the meantime, here’s a quick fix with custom CSS:

    @media only screen and (max-width: 767px) {
        .tophead .search-form {
            width: 50%;
            right: 0;
            margin: 0 0 0 auto;
        }
    }
    • This reply was modified 1 month ago by  iceable.
    #24680
    Reply to: Instagram browser compatibility issue

    guidoxyz
    Participant

    Once again, that’s great – many thanks indeed for all your help!

    #24682
    Reply to: Instagram browser compatibility issue

    guidoxyz
    Participant
    This reply has been marked as private.
    #24683
    Reply to: Instagram browser compatibility issue

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!
    This reply has been marked as private.
    #24687
    Reply to: Instagram browser compatibility issue

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!
    This reply has been marked as private.
Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe