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 10 replies - 16 through 25 (of 25 total)
  • Thread Starter Anuj

    (@anujmakhloga)

    Hi,

    I deactivated all the plugins (except amp, amp for generatepress, and the ad plugin), but there was no change in the loading process. It’s still the same.

    Apart from that, I removed all my CSS (except the one given by David), but no difference.

    Elvin

    (@ejcabquina)

    Hi there,

    If I may suggest:

    Can you try adding the style by hooking it with high priority using PHP?

    here’s a sample code.

    add_action('wp_head', 'priority_styling', 1);

function priority_styling(){
echo '<style id="hooked-styles"> amp-ad[type=adsense], amp-ad[type=doubleclick] {
    max-width: 100vw;
} </style>';
}
    Thread Starter Anuj

    (@anujmakhloga)

    Can you try adding the style by hooking it with high priority using PHP?

    Sorry, I don’t get it (newbie alert). Do I have to add this in functions.php?

    Also, should I remove that CSS?

    David

    (@diggeddy)

    Yes, that code is PHP – it goes in the child theme functions.php or you can add it via the Code Snippets plugin. More info here:

    https://docs.generatepress.com/article/adding-php/

    And yes, you can remove the CSS as Elvins function is adding that CSS for you.

    Thread Starter Anuj

    (@anujmakhloga)

    Hi,

    It’s not working too. Even the container which I used to hide from this CSS is back too –

    html[amp] aside#block-5{display:none}

    image

    That container is actually a sidebar(used for ads) but only for non-amp but after adding that php, this container is showing in amp too. That above CSS used to hide that container but not now.

    • This reply was modified 3 years ago by Anuj.
    Thread Starter Anuj

    (@anujmakhloga)

    Container is hidden now. But the loading is still the same.

    David

    (@diggeddy)

    Check the following image:

    https://www.screencast.com/t/d1ove0TFH8

    What you see is the empty Advert Containers on Initial Load, they have an inline width of 100vw – which makes them extend beyond the width of the container, causing the overflow.

    You can try this CSS to stop horizontal overflow:

    html, body {
    overflow-x: hidden;
}

    But thats about as much i can offer – as the issue is related to the inline styles the advert is given.

    Thread Starter Anuj

    (@anujmakhloga)

    Unfortunately, it’s not working.

    Thanks for all your help and support. Marking it as resolved, can’t do anything else. There are some more errors, creating new topic for the same.

    Thank you.

    David

    (@diggeddy)

    Sorry we couldn’t provide a solution.
    You may want to consider passing my last reply to the plugin developer.

    Thread Starter Anuj

    (@anujmakhloga)

    Thank you, will pass it on.

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