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