Site not responsive in tablet

Hi,
I found that my site is not responsive on my tablet. But it is responsive if I disable the plugins in safe-mode. I have only official plugins on my website.

I have the following plugins on my website:

The issue is not visible on meta. I think it’s because meta is not using the discourse-adplugin.

Website as seen in the tablet:

Could you try disabling your adblocker or using an incognito mode to see if that has an effect?

Having the same issue in incognito mode also.

I suspect this has something to do with the new sidebar, because if I use the hamburger menu to hide the sidebar then the site gets responsive and align with the screen perfectly.

1 Like

I’m afraid I don’t have a tablet to test this on myself, but could you try disabling the sidebar using the enable experimental sidebar hamburger and enable sidebar admin settings and see if that helps in the short term:

1 Like

yes, If I disable the two sidebar settings the site becomes responsive again and align with the screen. The issue is related to the sidebar.

Hello,

I can repro it on your site. I think that cause the top ads have fix width. I am not sure it possible to select a responsive ads type? :thinking: or make it width css. Probably the discourse ads need some update to work better with sidebar… or do you have any modification on ads?

1 Like

This is what I’m seeing on my iPad Pro FWIW.

Let me know if you’d like me to try again after you toggle any settings. :+1:

Adblockers active



Adblockers inactive



2 Likes

Can you try add this to new or existing theme component to check how this works?

Desktop / CSS

@media screen and (max-width: 1000px) {
  .google-adsense .google-adsense-content {
    width: 100% !important;
  }
}
2 Likes

I have added the CSS. Now I don’t have the issue on the main site, but I have the issue on all the pages.

I don’t have made any modifications to the ads. I am using fixed-size ads above the topic list in the adsense pluguin.

1 Like

I have toggled the settings. Can you please try one more time??

Not noticing any obvious differences, maybe due to caching?

Adblockers active



Adblockers inactive



I see. I think the problem is with fix width ads. For example if you open the site with collapsed sidebar and then open sidebar will pull right the full sized ads too and only update the ad width after full page refresh.

Unfortunately I can’t try it now on my test site.

But I can imagine something like this can work for the other ads too. Can you try to change the previous code to this?

@media screen and (max-width: 1110px) {
  .google-adsense .google-adsense-content {
    width: 100% !important;
    .adsbygoogle {
      width: 100% !important;
      > div {
        width: 100% !important;
      }
    }
  }
}
1 Like

I have changed the previous CSS with the new one. But still, I am having the same issue on all the pages but not on the main site. I have also tried clearing the cache but same.

1 Like

Sorry that was my best tip for now but at least we know now the ads cause this. I think you can remove the code to be sure to not will conflict with the future fix. :slightly_smiling_face:

1 Like

Thanks for the help. I hope someone will fix this issue soon.

1 Like

I found that Meta too has the same problem on all the pages.

1 Like

Hello, Oh yeah, I can repro it. It seems to the bottom .loading-container max-width under 790px cause this with open sidebar on topic pages.

Probably it should be good if adds to the core the --d-sidebar-width to this calculation when .has-sidebar-page available?

But I think you’ll have better experience on that screen size on mobile view.

Summarize:

On the latest page the top ad fixed width cause this and on the topic pages that I mentioned above.

This quick fix should works for you.

Desktop / CSS

.google-adsense .google-adsense-content {
  max-width: 100%;
  .adsbygoogle {
    max-width: 100%;
    > div {
      max-width: 100%;
    }
  }
}

@media all and (max-width: 790px) {
  body.has-sidebar-page {
    .topic-area > .loading-container {
      max-width: calc(100vw - var(--d-sidebar-width) - 32px);
    }
  }
}
2 Likes

Thank you, Don. Now the site is responsive and working as expected on my tablet. I hope discourse staff will fix this bug on meta as well.

1 Like