1. YAF.NET Support Forum
  2. YAF Support
  3. YAF Issues & Bugs Discussion
  4. Mobile Usability > Content wider than screen
tecman
  •  tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2018-11-16T15:06:52Z
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

Click to View Image45 View(s)


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
2018-11-30T13:41:06Z
Check this posting...

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

this fix will be included in YAF 2.24.15
UserPostedImage
tecman
  •  tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2018-12-27T13:21:01Z
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
  •  tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2019-03-05T15:59:55Z
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

Click to View Image33 View(s)

Screenshot_20190305_175758_com.android.chrome.jpg

Click to View Image30 View(s)



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

Click to View Image27 View(s)

tha_watcha
2019-03-07T15:31:35Z
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
  •  tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2019-03-07T16:14:45Z
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 22 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

Click to View Image27 View(s)



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
2019-03-07T16:23:24Z
can you post the url of that topic, or is it not public viewable?
UserPostedImage
tha_watcha
2019-03-07T16:34:10Z
by the way i think it should be

.yafnet .code, .yafnet .quote, .yafnet .fileattach {
  max-width: 65vw; }
UserPostedImage
tha_watcha
2019-03-07T16:35:46Z
by the way i think it should be

.yafnet .code, .yafnet .quote, .yafnet .fileattach {
  max-width: 65vw; }
UserPostedImage
tecman
  •  tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2019-03-07T16:40:52Z
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

Click to View Image25 View(s)

tha_watcha
2019-03-07T17:16:10Z
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

Click to View Image25 View(s)



the word-break css property should help

.yafnet .selectionQuoteable {
  max-width: 75vw;
word-break: break-word; }
UserPostedImage
tecman
  •  tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2019-03-07T17:21:44Z
What should be the full fix? Use this setting together with

.yafnet .code, .yafnet .quote, .yafnet .fileattach {
  max-width: 75vw; }
tha_watcha
2019-03-07T17:54:29Z
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
  •  tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2019-03-15T11:48:15Z
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

Click to View Image24 View(s)


I tried
.yafnet .code { max-width: 75vw; }
, but this did not help.
How to fix this problem with code blocks?
tha_watcha
2019-03-15T13:01:06Z
Then make the value smaller like 65vw
UserPostedImage
 Atom Feed Rss Feed
Similar Topics
Users browsing this topic
    1. YAF.NET Support Forum
    2. YAF Support
    3. YAF Issues & Bugs Discussion
    4. Mobile Usability > Content wider than screen
     

    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

    Useful Links

    Our Contacts

    www.yetanotherforum.net

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