Welcome Guest! To enable all features please Login or Register.
Options
View
Go to last post Go to first unread
Offline vcsharp  
#1 Posted : 30 September 2018 09:10:04(UTC)
vcsharp


Rank: YAF Commander

Reputation:

Joined: 03/10/2017(UTC)
Posts: 75
Man
India

Thanks: 24 times
I have noticed that the code block in a forum post has a width of 600px according to CSS in Yafmobile/theme.css file. As a result, when viewing a forum post page on a mobile phone there is unnecessary horizontal scroll added to the page that spoils the layout on a mobile device especially when all other elements on the same page are fitting the device width perfectly.

To resolve this, I used a simple CSS fix that will work across all modern browsers and for IE9 or greater. The below CSS needs to be pasted into the CSS file at Yafmobile/theme.css. I feel this should be fixed since its an easy fix and it enhances mobile experience of end user.

The before and after videos of how the code window looks like can be seen at following url's.




Code:

/*make code div not occupy higher width than mobile device width*/
.yafnet div.code div, .yafnet div.code {
        max-width: 85vw;
}

Edited by user 30 September 2018 10:09:34(UTC)  | Reason: added before and after videos, so the effect of using CSS is very clear

Sponsor
Offline tha_watcha  
#2 Posted : 04 October 2018 18:05:12(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,911
Germany

Thanks: 73 times
Was thanked: 1187 time(s) in 1017 post(s)
Thanks will be inculded with the next update!
Offline vcsharp  
#3 Posted : 05 October 2018 08:34:07(UTC)
vcsharp


Rank: YAF Commander

Reputation:

Joined: 03/10/2017(UTC)
Posts: 75
Man
India

Thanks: 24 times
For very small devices like iphone 5/SE some horizontal scroll appears on these devices even when using a max-width of 85vw. To prevent this, some default styles in Yafmobile/theme.css.file need to be commented as mentioned in CSS below.

On mobile devices, there is no need for padding-left of 16px or margin of 5px when styling .yafnet .code element, hence they have been commented. Also, on mobile devices there is no need for width of 600px, which has also been commented.

So, a complete solution is to make changes as outlined below. You can see how these CSS changes makes the code block show on various devices in following video: https://goo.gl/KY5hkM. You will notice that there is absolutely no horizontal scroll appearing as a result of this CSS. (NOTE: make sure to remove width:500px for debug info in footer.cs under YAF.Controls project, else horizontal scroll will appear in spite of below CSS changes)

themes/Yafmobile/theme.css changes

Code:
.yafnet .code {
	/*padding-left: 16px;*/	
	/*margin: 5px;*/
}
.yafnet .innercode {
	padding: 4px;
	background-color: #efefef;
	border: solid 1px #808080;
	color: #000000;
	line-height: 1.3em;
	font-family: "courier new", "times new roman", monospace;
    overflow: scroll;
    /*width: 600px;*/
	white-space: nowrap;
}


Content/forum.css changes (no need to include max-width for .innercode div)

Code:
    .yafnet .code {
        max-width: 85vw;
    }

Edited by user 05 October 2018 08:44:52(UTC)  | Reason: Not specified

Rss Feed  Atom Feed
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.

Notification

Icon
Error