[Resolved] Website mobile width issues when opened through instagram?

[Adam]

Hello,

I encountered a strange issue that I was hoping to get some advice on.

My new website I made with generatepress works properly on mobile. But when on its instagram page (its linked on the menu) if you open the website link that is on the instagram profile page, it breaks for some reason on mobile. Not sure why this would be happening.

When I open the website through instagram the sizing is broken. It kind of looks like the elements header is the culprit. I opened a different website through its instagram page that is using the Avada theme and that works and is sized properly so it looks like its specific to generatepress.

Any ideas would be great thank you.

[David]

Hi there,

Instagram (and facebook) app is notoriously bad at rendering web pages, which is all its doing as opposed to being a proper browser. Are you able to share images of the two sites? We may be able to offer some advice on improving it.

[Adam]

Sure I took screenshots on my android of the avada theme “barkpetboutique.com” site and generatepress theme “victoriarecord.com” site both being opened from their respective instagram pages (https://www.instagram.com/thevicrecord/ and https://www.instagram.com/barkpetboutique/) from within the instagram app. The generate press width is having issues, like something is pushing it too wide. It looks like it might be the header element but its hard to tell. I am able to “pinch zoom out” the generate press site as you can see in the two screenshots. Pinch zooming out does not affect the avada theme site.

Here are the three screenshots, I just uploaded them on imgur. https://imgur.com/a/SLYeCAk

I want to remake all my sites using the generatepress theme but it would be good to not have this issue occur in future sites. If you have any advice that would be great.

Thanks

[David]

Not sure if this will work but lets give it a shot – add this to the wp_head hook:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">

[Adam]

Hi David,

I have tried that out but unfortunately it did not fix the issue.

I was going to disable the header to see if that is the cause of this like I was thinking but I don’t really want to while the site is live.

Any other ideas?

Thank you.

[Tom]

Hi there,

Good to see someone local using GP! 🙂

It’s almost impossible to debug this, as we can’t use developer tools inside app browsers.

So, we need to guess..

First, let’s try reducing the h1 size on mobile:

@media (max-width: 768px) {
    .home-title {
        font-size: 40px !important;
    }
}

[Adam]

Hi Tom,

Yes I was quite pleased to find out generatepress is based out off Vancouver Island!

I have been learning about web development this year and it has been a long process of experimenting with different products and sifting through a lot of available resources. The more that I understand though the more I appreciate the excellent product you have created. As well as the fantastic ongoing support from the generatepress team.

I will be sure to recommend generatepress in the future to anyone I meet in the tech community.

As for your suggestion:

Changing the font size did stop the title from being cut off which is great.

But the issue where I can pinch zoom because something is causing the gap on the right side still exists.

I thought it was something inside the header or the header itself causing that whitespace on the right. But I added the .global-header class to the header and added the css:

@media (max-width: 768px) {
.global-header {
 display: none;
}
}

So the header wasn’t even present on mobile but the issue still occurs when I try to open the site up through instagram.

Any other ideas that I could try out?

Thank you.

[Tom]

You might need to try the same method for other elements on the page. Hide each section of your website one by one.

For example, let’s test if it’s in the content:

@media (max-width: 768px) {
    .entry-content {
        display: none;
    }
}

[Adam]

Hi Tom,

It was difficult finding a good time to disable more of the site as its currently live but I eventually did and it turned out the problem was within the footer. The 3rd footer widget had an email address in a font size that was too large and causing the text to overflow on the right and create that extra white space.

It is interesting that it only happened in the footer, I would have thought the footer padding would have prevented any overflow. Maybe the header/footer behave differently through the Instagram browser than the content.

Thank you for your help!

[Tom]

Interesting, social browsers are pretty bad. I’m glad you found the issue! 🙂

[Author]

Posts