Screen loading issue

Resolved Anuj
(@anujmakhloga)

3 years, 3 months ago
The problem I am facing is that the responsive auto-ads are overflowing the screen in the AMP version of the website, causing an improper loading of the page with some space visible on the right side for a brief period of time. To resolve this issue, I have applied the following CSS code:
```
html[amp] amp-ad[type=adsense],amp-ad[type=doubleclick]{max-width:100vw}
```
This code limits the width of the ads to 100% of the viewport, preventing the ads from overflowing the screen. However, this has resulted in improper loading of every AMP post on my website. Is there any solution? I read something similar in one of the topics, but I am not sure, so didn’t try that css. Here’s that topic.

The problem is with the AMP (mobile version) only, otherwise loading is fine, ads are showing correctly.
- This topic was modified 3 years, 3 months ago by Anuj.
The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)

Plugin Support Milind More
(@milindmore22)

3 years, 3 months ago
Hello @anujmakhloga

Thank you for contacting us, This looks like a issue related to your theme I will recommend checking with your theme developer as well.

Additionally please try adding the following CSSS
```
html[amp] body {
    display:inline-block;
}
```
We hope this helps!
Thread Starter Anuj
(@anujmakhloga)

3 years, 3 months ago

Thank you.

It kind of worked but the texts and other elemens were appearing smaller than their usual size (liked zoomed-out). Also, don’t know why but ads also stopped showing in the non-amp version. So, now, I have removed the code which you provided me and added the same which I have been using. I don’t know what to do now!

Thread Starter Anuj
(@anujmakhloga)

3 years, 3 months ago

I have contacted the theme support in the past, but even they suggested me at the end to ask help from the plugin developers.

Here’s the complete query/conversation with the Generatepress theme support, just in case – Improper Screen size.
Plugin Support Milind More
(@milindmore22)

3 years, 3 months ago
Hello @anujmakhloga

When we disabled javascript in browser and rechecked the issues it seems to be related to mostly CSS.

Can you please try adding the following CSS
```
html[amp] amp-ad[type=adsense], amp-ad[type=doubleclick]{
    max-width: 100vw;
    display: table-cell;
}
```
Thread Starter Anuj
(@anujmakhloga)

3 years, 3 months ago
Thank you, and that’s fantastic! Now there’s no issue with the amp or the loading of the page.

But…again, ads (between article ads) in mobile (non-amp version) aren’t showing when using this code. I don’t know how is that possible, but it’s causing the issue somehow.

I am using some more css for aligning the texts and inline images in the mobile version of the post. I don’t know if that has something to do with the conflict. Here’s the list of the additional css I am using –
```
.entry-summary  {
    display: none;
}

.page-header-image-single  {
      display: none;
}

.entry-meta  {
display: none;
}

@media  (max-width: 768px) {
    .inside-article .alignleft  {
        float: left;
        margin-right: 0.5em;
    }
}

@media (max-width: 768px) {
    .separate-containers .inside-article  {
        padding-left: 1em;
        padding-right: 1em;
    }
}

@media (max-width: 768px) {
.entry-content ul  {
    margin-left: 1.5em;
   }
}
```
I don’t have any knowledge of css or any coding stuff, but is it possible to display my non-amp or say overall site in “table-cell” format? may be this is causing the issue! I have no idea, though, just guessing.
Thread Starter Anuj
(@anujmakhloga)

3 years, 3 months ago
update regarding the css. I have removed the css for mobile, bascially removed that @media part from all the css. Now it’s like –
```
.entry-summary  {
    display: none;
}

.page-header-image-single  {
      display: none;
}

.entry-meta  {
display: none;
}

    .inside-article .alignleft  {
        float: left;
        margin-right: 0.5em;
    }

    .separate-containers .inside-article  {
        padding-left: 1em;
        padding-right: 1em;
    }

.entry-content ul  {
    margin-left: 1.5em;
   }

html[amp] amp-ad[type=adsense], amp-ad[type=doubleclick]{max-width: 100vw;display: table-cell;}
```
Don’t know if the format is correct. for example, in this css –
```
.separate-containers .inside-article {
padding-left: 1em;
padding-right: 1em;
}
```
Is .separate-containers .inside-article part correct? I mean, there are two things here, so do I need to use comma or something? But it’s working, so don’t know.
Plugin Support Milind More
(@milindmore22)

3 years, 3 months ago

Hello @anujmakhloga

Our expertise in CSS are limited, I will recommend contacting CSS expert who can guide you better on this one

Thread Starter Anuj
(@anujmakhloga)

3 years, 3 months ago

Thank you. I will get in touch with you after confirming about the css, since the ads aren’t showing in the non-amp version most of the time when adding the css you provided.

Plugin Support Milind More
(@milindmore22)

3 years, 3 months ago

@anujmakhloga my CSS is AMP specific it should not affect non-AMP pages

html[amp] the selector ensures that the CSS will only apply if the <html> tag has amp="" attribute (<html amp="">)

Thread Starter Anuj
(@anujmakhloga)

3 years, 3 months ago

This makes complete sense, and even I have confirmed about the other css (from the Theme support) I am using, but don’t know why all this is happenig!

Plugin Support Milind More
(@milindmore22)

3 years, 3 months ago

@anujmakhloga As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Screen loading issue’ is closed to new replies.