Code window is spoiling the layout on mobile device due to being wider than...

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

#1 2018-09-30T07:10:04Z

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.

Before video i.e. without including the below special CSS: https://goo.gl/3VNhjd
After video i.e. after the below special CSS was included in theme.css file: https://goo.gl/Jf4UjS


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

Edited by user 2018-09-30T08:09:34Z | Reason: added before and after videos, so the effect of using CSS is very clear

Topic Starter

Rank: YAF Commander
Reputation:
Honored

86%
Joined: 03/10/2017
Posts: 77
Man India
Thanks: 25 times
Was thanked: 1 time(s) in 1 post(s)

1 user thanked vcsharp for this useful post.

Dennis Hevener on 28/12/2018

Sponsor

Wanna join the discussion?! Login to your YAF.NET Support Forum forum account or Register a new forum account

#2 2018-10-04T16:05:12Z

Thanks will be inculded with the next update!

Rank: YAF.NET Project Lead
Reputation:
Exalted

100%
Medals:
Joined: 06/03/2010
Posts: 4,016
Germany
Thanks: 73 times
Was thanked: 1211 time(s) in 1036 post(s)

1 user thanked tha_watcha for this useful post.

Dennis Hevener on 28/12/2018

#3 2018-10-05T06:34:07Z

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

.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)

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

Edited by user 2018-10-05T06:44:52Z | Reason: Not specified

Topic Starter

Rank: YAF Commander
Reputation:
Honored

86%
Joined: 03/10/2017
Posts: 77
Man India
Thanks: 25 times
Was thanked: 1 time(s) in 1 post(s)

#4 2018-12-27T13:23:27Z

Just a reminder for the YAF developers. We also need a similar fix for quotes. See my question here:
Mobile Usability > Content wider than screen

Rank: YAF All-the-Time
Reputation:
Exalted

100%
Joined: 20/09/2013
Posts: 160
Thanks: 8 times

#5 2019-01-15T18:07:55Z

Originally Posted by: tecman

Just a reminder for the YAF developers. We also need a similar fix for quotes. See my question here:
Mobile Usability > Content wider than screen

The quote part will be sized properly if div.innerquote css specifies a max-width like 85vw or something less than device width. I will post that CSS from my app later after doing some more research on YAFMobile theme.

UPDATE
I noticed that in YAF 2.2.3, the quote part is already within the mobile device width boundaries when using YAFMobile theme. So, no CSS is needed but as a caution, one could include the following CSS in YAFMobile/theme.css file. (Screenshot of YAFMobile theme for quote part on a mobile device )

.yafnet .innerquote {
   max-width: 85vw;
}

Edited by user 2019-01-16T17:51:00Z | Reason: added more about styling quote part for mobile device

Topic Starter

Rank: YAF Commander
Reputation:
Honored

86%
Joined: 03/10/2017
Posts: 77
Man India
Thanks: 25 times
Was thanked: 1 time(s) in 1 post(s)

Users browsing this topic

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.

About Us

Project Twitter Updates

Useful Links

Our Contacts