tecman
  • Posts: 176
  • Joined: 20/09/2013
Google Search Console reports one more problem for the pages of our forum if they contain Code or Quote blocks. It tells us that these pages have the issue 'Content wider than screen'. That's true, and we see it in their Mobile-Friendly Test tool or on a real smartphone:
2018-11-16_16h58_47.png
Can this issue be fixed? To solve this problem, I think, we could make the width of the Code and Quote blocks equal the available viewport width and add the horizontal scroll bar to them to scroll their contents if required.
Sponsor
tha_watcha
  • Posts: 4132
  • Joined: 06/03/2010
Check this posting...

http://yetanotherforum.n...-wider-than-device-width 

this fix will be included in YAF 2.24.15
UserPostedImage
tecman
  • Posts: 176
  • Joined: 20/09/2013
It is just a half of the solution I need. vcsharp suggests how to fix the problem for code blocks, but we also need this for quotes. A similar fix must be implemented for the style `.yafnet div.quote` or the appropriate style for quotes.
tecman
  • Posts: 176
  • Joined: 20/09/2013
Upgraded to the v2.2.4.15.

This problem is still not fixed for the Quote blocks in the new version.

I also noticed that the File Attachments block also has the same problem:

Screenshot_20190305_175750_com.android.chrome.jpg Screenshot_20190305_175758_com.android.chrome.jpg

As for the Code blocks, the problem is fixed, but the right edge of the Code block is placed at the right edge of the smartphone screen so it's not clear whether the Code block has this right edge:

Screenshot_20190305_175326_com.android.chrome.jpg
tha_watcha
  • Posts: 4132
  • Joined: 06/03/2010
So you need to help me here because i cant really test this.

Would it work if you at this to the forum.min.css?

.yafnet .code, .yafnet .quote, .yafnet .fileattach {
  max-width: 85vw; }

UserPostedImage
tecman
  • Posts: 176
  • Joined: 20/09/2013
It's a HUAWEI P20 smartphone and the default Chrome browser. I cleared the cache, but the result is still the same - see the long screen capture (as if there were no viewport):

  Screenshot_20190307_180922_com.android.chrome.jpg (1,265kb) downloaded 8 time(s).

Here is also the bottom part of the page exactly how I see it on the smartphone screen:

Screenshot_20190307_181007_com.android.chrome.jpg

Pay attention to the fact that we can't see the Close and More Details button in the bottom black cookie usage notification block.
tha_watcha
  • Posts: 4132
  • Joined: 06/03/2010
can you post the url of that topic, or is it not public viewable?
UserPostedImage
tha_watcha
  • Posts: 4132
  • Joined: 06/03/2010
by the way i think it should be

.yafnet .code, .yafnet .quote, .yafnet .fileattach {
  max-width: 65vw; }

UserPostedImage
tecman
  • Posts: 176
  • Joined: 20/09/2013
You can try this url:
https://10tec.com/forum/...-iGrid-NET-on-a-WPF-form 

The fix with "max-width: 85vw" helps to limit the block width but not the text width inside:

Screenshot_20190307_183846_com.android.chrome.jpg
tha_watcha
  • Posts: 4132
  • Joined: 06/03/2010
Originally Posted by: tecman 

You can try this url:
https://10tec.com/forum/...-iGrid-NET-on-a-WPF-form 

The fix with "max-width: 85vw" helps to limit the block width but not the text width inside:

Screenshot_20190307_183846_com.android.chrome.jpg



the word-break css property should help

.yafnet .selectionQuoteable {
  max-width: 75vw;
word-break: break-word; }

UserPostedImage
tecman
  • Posts: 176
  • Joined: 20/09/2013
What should be the full fix? Use this setting together with

.yafnet .code, .yafnet .quote, .yafnet .fileattach {
  max-width: 75vw; }
tha_watcha
  • Posts: 4132
  • Joined: 06/03/2010
Originally Posted by: tecman 

What should be the full fix? Use this setting together with

.yafnet .code, .yafnet .quote, .yafnet .fileattach {
  max-width: 75vw; }



Check my post above.

UserPostedImage
tecman
  • Posts: 176
  • Joined: 20/09/2013
Well, I added this to forum.min.css:
.yafnet .selectionQuoteable {
  max-width: 75vw;
word-break: break-word; }

It helped to fix the problem with quotes.
However, the code blocks are still very wide:
Screenshot_20190315_134343_com.android.chrome.jpg
I tried
.yafnet .code { max-width: 75vw; }

, but this did not help.
How to fix this problem with code blocks?
tha_watcha
  • Posts: 4132
  • Joined: 06/03/2010
Then make the value smaller like 65vw
UserPostedImage
tecman
  • Posts: 176
  • Joined: 20/09/2013
The same result like in post #13. Browser's history cleared before test.
Users browsing this topic
    Forum Jump  
    • You cannot post new topics in this forum.
    • You cannot reply to topics in this forum.
    • You cannot delete your posts in this forum.
    • You cannot edit your posts in this forum.
    • You cannot create polls in this forum.
    • You cannot vote in polls in this forum.

    About Us

    The YAF.NET is an open source .NET forum project. YAF.NET is supported by an team of international developers who are build community by building community software.

    Powered by Resharper Donate with PayPal button

    Project Twitter Updates

    Copyright © YetAnotherForum.NET & Ingo Herbote. All rights reserved