#1
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.
Topic Starter
  • tecman
  • Rank: YAF All-the-Time
  • Reputation:
    Exalted
    100%
  • Joined: 20/09/2013
  • Posts: 160
  • Thanks: 8 times
#2
Check this posting...

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

this fix will be included in YAF 2.24.15
UserPostedImage
  • tha_watcha
  • Rank: YAF.NET Project Lead
  • Reputation:
    Exalted
    100%
  • Medals:
    Medal of Honor: Portal Puzzle Master: Portal Puzzle Master for DNNMedal of Honor Key: Given to pillars of the community who are key players in the YAF community and project.DNN Master: DNN Module ManBug Killer Medal of Honor: Medal for being a kick-ass bug killer!Medal of Honor for the Support King: Support King! Amazing asset to the YAF.NET Community.
  • Joined: 06/03/2010
  • Posts: 4,002
  •  Germany
  • Thanks: 74 times
  • Was thanked: 1205 time(s) in 1031 post(s)
#3
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.
Topic Starter
  • tecman
  • Rank: YAF All-the-Time
  • Reputation:
    Exalted
    100%
  • Joined: 20/09/2013
  • Posts: 160
  • Thanks: 8 times
#4
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.jpgScreenshot_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
Topic Starter
  • tecman
  • Rank: YAF All-the-Time
  • Reputation:
    Exalted
    100%
  • Joined: 20/09/2013
  • Posts: 160
  • Thanks: 8 times
#5
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
  • tha_watcha
  • Rank: YAF.NET Project Lead
  • Reputation:
    Exalted
    100%
  • Medals:
    Medal of Honor: Portal Puzzle Master: Portal Puzzle Master for DNNMedal of Honor Key: Given to pillars of the community who are key players in the YAF community and project.DNN Master: DNN Module ManBug Killer Medal of Honor: Medal for being a kick-ass bug killer!Medal of Honor for the Support King: Support King! Amazing asset to the YAF.NET Community.
  • Joined: 06/03/2010
  • Posts: 4,002
  •  Germany
  • Thanks: 74 times
  • Was thanked: 1205 time(s) in 1031 post(s)
#6
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 2 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.
Topic Starter
  • tecman
  • Rank: YAF All-the-Time
  • Reputation:
    Exalted
    100%
  • Joined: 20/09/2013
  • Posts: 160
  • Thanks: 8 times
#7
can you post the url of that topic, or is it not public viewable?
UserPostedImage
  • tha_watcha
  • Rank: YAF.NET Project Lead
  • Reputation:
    Exalted
    100%
  • Medals:
    Medal of Honor: Portal Puzzle Master: Portal Puzzle Master for DNNMedal of Honor Key: Given to pillars of the community who are key players in the YAF community and project.DNN Master: DNN Module ManBug Killer Medal of Honor: Medal for being a kick-ass bug killer!Medal of Honor for the Support King: Support King! Amazing asset to the YAF.NET Community.
  • Joined: 06/03/2010
  • Posts: 4,002
  •  Germany
  • Thanks: 74 times
  • Was thanked: 1205 time(s) in 1031 post(s)
#8
by the way i think it should be

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

UserPostedImage
  • tha_watcha
  • Rank: YAF.NET Project Lead
  • Reputation:
    Exalted
    100%
  • Medals:
    Medal of Honor: Portal Puzzle Master: Portal Puzzle Master for DNNMedal of Honor Key: Given to pillars of the community who are key players in the YAF community and project.DNN Master: DNN Module ManBug Killer Medal of Honor: Medal for being a kick-ass bug killer!Medal of Honor for the Support King: Support King! Amazing asset to the YAF.NET Community.
  • Joined: 06/03/2010
  • Posts: 4,002
  •  Germany
  • Thanks: 74 times
  • Was thanked: 1205 time(s) in 1031 post(s)
#9
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
Topic Starter
  • tecman
  • Rank: YAF All-the-Time
  • Reputation:
    Exalted
    100%
  • Joined: 20/09/2013
  • Posts: 160
  • Thanks: 8 times
#10
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
  • tha_watcha
  • Rank: YAF.NET Project Lead
  • Reputation:
    Exalted
    100%
  • Medals:
    Medal of Honor: Portal Puzzle Master: Portal Puzzle Master for DNNMedal of Honor Key: Given to pillars of the community who are key players in the YAF community and project.DNN Master: DNN Module ManBug Killer Medal of Honor: Medal for being a kick-ass bug killer!Medal of Honor for the Support King: Support King! Amazing asset to the YAF.NET Community.
  • Joined: 06/03/2010
  • Posts: 4,002
  •  Germany
  • Thanks: 74 times
  • Was thanked: 1205 time(s) in 1031 post(s)
#11
What should be the full fix? Use this setting together with

.yafnet .code, .yafnet .quote, .yafnet .fileattach {
  max-width: 75vw; }
Topic Starter
  • tecman
  • Rank: YAF All-the-Time
  • Reputation:
    Exalted
    100%
  • Joined: 20/09/2013
  • Posts: 160
  • Thanks: 8 times
#12
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
  • tha_watcha
  • Rank: YAF.NET Project Lead
  • Reputation:
    Exalted
    100%
  • Medals:
    Medal of Honor: Portal Puzzle Master: Portal Puzzle Master for DNNMedal of Honor Key: Given to pillars of the community who are key players in the YAF community and project.DNN Master: DNN Module ManBug Killer Medal of Honor: Medal for being a kick-ass bug killer!Medal of Honor for the Support King: Support King! Amazing asset to the YAF.NET Community.
  • Joined: 06/03/2010
  • Posts: 4,002
  •  Germany
  • Thanks: 74 times
  • Was thanked: 1205 time(s) in 1031 post(s)
#13
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?
Topic Starter
  • tecman
  • Rank: YAF All-the-Time
  • Reputation:
    Exalted
    100%
  • Joined: 20/09/2013
  • Posts: 160
  • Thanks: 8 times
#14
Then make the value smaller like 65vw
UserPostedImage
  • tha_watcha
  • Rank: YAF.NET Project Lead
  • Reputation:
    Exalted
    100%
  • Medals:
    Medal of Honor: Portal Puzzle Master: Portal Puzzle Master for DNNMedal of Honor Key: Given to pillars of the community who are key players in the YAF community and project.DNN Master: DNN Module ManBug Killer Medal of Honor: Medal for being a kick-ass bug killer!Medal of Honor for the Support King: Support King! Amazing asset to the YAF.NET Community.
  • Joined: 06/03/2010
  • Posts: 4,002
  •  Germany
  • Thanks: 74 times
  • Was thanked: 1205 time(s) in 1031 post(s)
#15
The same result like in post #13. Browser's history cleared before test.
Topic Starter
  • tecman
  • Rank: YAF All-the-Time
  • Reputation:
    Exalted
    100%
  • Joined: 20/09/2013
  • Posts: 160
  • Thanks: 8 times
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