Welcome Guest! To enable all features please Login or Register.

Login


2 Pages12>
Options
View
Go to last post Go to first unread
Offline tecman  
#1 Posted : 16 November 2018 16:06:52(UTC)
tecman


Rank: YAF All-the-Time

Reputation:

Joined: 20/09/2013(UTC)
Posts: 150

Thanks: 8 times
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
Offline tha_watcha  
#2 Posted : 30 November 2018 14:41:06(UTC)
tha_watcha


Rank: YAF.NET Project Lead

Reputation:

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(UTC)
Posts: 3,972
Germany

Thanks: 73 times
Was thanked: 1199 time(s) in 1027 post(s)
Check this posting...

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

this fix will be included in YAF 2.24.15
Offline tecman  
#3 Posted : 27 December 2018 14:21:01(UTC)
tecman


Rank: YAF All-the-Time

Reputation:

Joined: 20/09/2013(UTC)
Posts: 150

Thanks: 8 times
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.
Offline tecman  
#4 Posted : 05 March 2019 16:59:55(UTC)
tecman


Rank: YAF All-the-Time

Reputation:

Joined: 20/09/2013(UTC)
Posts: 150

Thanks: 8 times
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
Offline tha_watcha  
#5 Posted : 07 March 2019 16:31:35(UTC)
tha_watcha


Rank: YAF.NET Project Lead

Reputation:

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(UTC)
Posts: 3,972
Germany

Thanks: 73 times
Was thanked: 1199 time(s) in 1027 post(s)
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?

Code:
.yafnet .code, .yafnet .quote, .yafnet .fileattach {
  max-width: 85vw; }
Offline tecman  
#6 Posted : 07 March 2019 17:14:45(UTC)
tecman


Rank: YAF All-the-Time

Reputation:

Joined: 20/09/2013(UTC)
Posts: 150

Thanks: 8 times
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.
Offline tha_watcha  
#7 Posted : 07 March 2019 17:23:24(UTC)
tha_watcha


Rank: YAF.NET Project Lead

Reputation:

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(UTC)
Posts: 3,972
Germany

Thanks: 73 times
Was thanked: 1199 time(s) in 1027 post(s)
can you post the url of that topic, or is it not public viewable?
Offline tha_watcha  
#8 Posted : 07 March 2019 17:34:10(UTC)
tha_watcha


Rank: YAF.NET Project Lead

Reputation:

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(UTC)
Posts: 3,972
Germany

Thanks: 73 times
Was thanked: 1199 time(s) in 1027 post(s)
by the way i think it should be

Code:
.yafnet .code, .yafnet .quote, .yafnet .fileattach {
  max-width: 65vw; }
Offline tecman  
#9 Posted : 07 March 2019 17:40:52(UTC)
tecman


Rank: YAF All-the-Time

Reputation:

Joined: 20/09/2013(UTC)
Posts: 150

Thanks: 8 times
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
Offline tha_watcha  
#10 Posted : 07 March 2019 18:16:10(UTC)
tha_watcha


Rank: YAF.NET Project Lead

Reputation:

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(UTC)
Posts: 3,972
Germany

Thanks: 73 times
Was thanked: 1199 time(s) in 1027 post(s)
Originally Posted by: tecman Go to Quoted Post
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

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

Edited by user 07 March 2019 18:18:14(UTC)  | Reason: Not specified

Offline tecman  
#11 Posted : 07 March 2019 18:21:44(UTC)
tecman


Rank: YAF All-the-Time

Reputation:

Joined: 20/09/2013(UTC)
Posts: 150

Thanks: 8 times
What should be the full fix? Use this setting together with

Code:
.yafnet .code, .yafnet .quote, .yafnet .fileattach {
  max-width: 75vw; }
Offline tha_watcha  
#12 Posted : 07 March 2019 18:54:29(UTC)
tha_watcha


Rank: YAF.NET Project Lead

Reputation:

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(UTC)
Posts: 3,972
Germany

Thanks: 73 times
Was thanked: 1199 time(s) in 1027 post(s)
Originally Posted by: tecman Go to Quoted Post
What should be the full fix? Use this setting together with

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


Check my post above.
Offline tecman  
#13 Posted : 15 March 2019 12:48:15(UTC)
tecman


Rank: YAF All-the-Time

Reputation:

Joined: 20/09/2013(UTC)
Posts: 150

Thanks: 8 times
Well, I added this to forum.min.css:
Code:
.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
Code:
.yafnet .code { max-width: 75vw; }

, but this did not help.
How to fix this problem with code blocks?
Offline tha_watcha  
#14 Posted : 15 March 2019 14:01:06(UTC)
tha_watcha


Rank: YAF.NET Project Lead

Reputation:

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(UTC)
Posts: 3,972
Germany

Thanks: 73 times
Was thanked: 1199 time(s) in 1027 post(s)
Then make the value smaller like 65vw
Offline tecman  
#15 Posted : 15 March 2019 14:30:13(UTC)
tecman


Rank: YAF All-the-Time

Reputation:

Joined: 20/09/2013(UTC)
Posts: 150

Thanks: 8 times
The same result like in post #13. Browser's history cleared before test.
Rss Feed  Atom Feed
Users browsing this topic
2 Pages12>
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.

Notification

Icon
Error