Improper screen-size loading

  • Resolved Anuj

    (@anujmakhloga)


    3 years ago

    Hi,

    I am here regarding the same screen-size issue but with some information. Now, I’ve realized that it’s only because of the ads I am using and not any ad plugin.
    Image
    This is the amp ad code I am using –

    <amp-ad width="100vw" height="320"
     type="adsense"
     data-ad-client="ca-pub-3613xxxxxxxxx"
     data-ad-slot="4xxxxxx"
     data-auto-format="rspv"
     data-full-width="">
  <div overflow=""></div>
</amp-ad>

    The problem is when [width = 100% of viewport] then that incorrect screen is loading in amp pages don’t know why? I can edit that width, but it’ll become a ‘fixed ad,’ which is not good. Even, after fixing the width, the page isn’t showing any ads.

    Do you have any solution to fix this viewport issue in the amp? Is it possible to edit that width, and it’ll still be responsive? or set the viewport so that ad don’t exceed that limit?

Viewing 15 replies - 1 through 15 (of 25 total)
  • Leo

    (@leohsiang)

    Hi there,

    I could be wrong but this doesn’t sound like a theme related issue.

    I believe this is something you will need to check with AMP’s support team.

    Let me know if I’m missing something here.

    Thread Starter Anuj

    (@anujmakhloga)

    Hi,

    Even I also have no idea. The amp support said – there is a chance (not 100%) that the theme is causing the error, and regarding that, he has provided a recorded video of one of the pages. Please take a look at this video

    The ad was displayed inside the box after changing the display type. Can you help me with that? I hope this can solve the issue. link of the page, just in case.

    David

    (@diggeddy)

    Hi there,

    try adding this CSS to your AMP custom CSS:

    amp-ad[type=adsense], amp-ad[type=doubleclick] {
    max-width: 100vw;
}
    Thread Starter Anuj

    (@anujmakhloga)

    Hi,

    Thanks a lot. I guess it’s working, have a look

    The pages aren’t loading smoothly, though. You can see in the video; first, it’s loading just like it used to be, and then the screen is getting fuller.

    I tried loading the pages in incognito mode on Dolphin and Kiwi Browser, but no difference.

    David

    (@diggeddy)

    Does it do that if you remove the CSS i provided? As i cannot see why it would.

    Thread Starter Anuj

    (@anujmakhloga)

    Without that code, the screen is showing like it used to be. Ads are exceeding the width, and the screen isn’t loading fully. Image

    Theme Author Tom

    (@edge22)

    It almost looks like the HTML of the page is loading before the CSS. Do you have anything on the site that might be deferring the loading of CSS?

    Thread Starter Anuj

    (@anujmakhloga)

    Hi,

    I am using Autoptimize plugin. And settings are like this only.

    There is this one extra option which isn’t in that article. MiscOptions

    Optimizing Matters

    (@optimizingmatters)

    Autoptimize is not active on AMP-pages, so it’s likely something else?

    Thread Starter Anuj

    (@anujmakhloga)

    I don’t think I have any other plugins that can defer CSS. Here’s the list, though.

    Leo

    (@leohsiang)

    Can you disable all plugins except AMP and AMP for GP to test?

    Thread Starter Anuj

    (@anujmakhloga)

    Without ads, pages are loading smoothly. I’ve tried different ad plugins, but it’s happening with every other ad plugin.

    I don’t know why.

    Theme Author Tom

    (@edge22)

    Yes, the ads are causing the horizontal scroll.

    The CSS that David provided fixes that horizontal scroll.

    The issue is that the page is loading before the CSS that David provided, so his fix is delayed, causing the jump you’re seeing.

    I’m not sure what’s causing that delay – have you tried deactivating all of your other plugins (other than AMP and the Ad plugin)?

    Thread Starter Anuj

    (@anujmakhloga)

    Thanks…will be back to you after eliminating the plugins one by one.

    *just an update –
    I am getting this recommedation in the site health section >

    Persistent object caching is not enabled
    The AMP plugin performs at its best when persistent object cache is enabled. Object caching is used to more effectively store image dimensions and parsed CSS.

    Don’t know if this has to do anything with the error.

    Theme Author Tom

    (@edge22)

    I don’t think that would cause the issue.

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘Improper screen-size loading’ is closed to new replies.