MyBB Community Forums

As you see here, things are all screwed up with desktop theme on mobile. Here's Global CSS copy and images.

body {
	color: #000;
	text-align: center;
	line-height: 1.4;
	margin: 0;
	font-family: Open Sans, Tahoma, Arial, Sans-Serif;

	font-size: 13px;

background: linear-gradient(to bottom, rgba(133,133,133,0.65) 0%,rgba(133,133,133,0) 100%); /* W3C */
}

.post_body a:link, .post_body a:visited {
      text-shadow: .05em .05em .05em;
}

.post_body a:hover, .post_body a:active {
transition: color 0.5s ease-in-out;
	text-decoration: underline;
}

a:link {
	color: #555;
	text-decoration: none;
text-shadow: none;
}

a:visited {
	color: #444;
	text-decoration: none;
text-shadow: none;
}

a:hover, a:active {
	color: #000;
	transition: color 0.5s ease-in-out;
	text-decoration: underline;
}

#container {
	width: 96%;
	color: #000;
	text-align: left;
	line-height: 1.4;
	margin: 15px auto;
	box-shadow: 0 0 10px #000000;
	font-family: Open Sans, Tahoma, Arial, Sans-Serif;
	font-size: 13px;
}

.wrapper {
	width: 95%;
	max-width: 1366px;
	margin: auto auto;
}

#logo {
background: url(http://www.chinaphonearena.com/forum/images/headerbackground.jpg) repeat-x scroll left bottom #13BCD0;
box-shadow: 0 0 10px #000000;border-radius: 10px 10px 0 0;
border-radius: 0 0 0 0;
min-height: 100px;
border-bottom: 1px solid #1d2b34;
}

#content {
overflow: visible !important;
background: #fff;
	width: auto !important;
	padding: 20px 10px;
	border-bottom: 1px solid #000;
}
#panel ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#panel ul.menu li {
	margin: 0 5px;
	display: inline;
}

#panel ul.menu li a {
	padding-left: 20px;
	background-repeat: no-repeat;
	background-position: left center;
}

#panel .upper ul.top_links {
	float: right;
	font-weight: bold;
}

#panel .upper ul.top_links a.search {
	background-image: url(images/twilight/icons/search.gif);
}

#panel .upper ul.top_links a.memberlist {
	background-image: url(images/twilight/icons/memberlist.gif);
}

#panel .upper ul.top_links a.calendar {
	background-image: url(images/twilight/icons/calendar.gif);
}

#panel .upper ul.top_links a.help {
	background-image: url(images/twilight/icons/help.gif);
}

#panel .upper a.logout {
	font-weight: bold;
	background: url(images/twilight/icons/logout.gif) right no-repeat;
	padding-right: 20px;
	margin-left: 10px;
}

#panel .upper a.login,
#panel .upper a.lost_password {
	background: url(images/twilight/icons/login.gif) no-repeat;
	padding-left: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .upper a.register {
	background: url(images/twilight/icons/logout.gif) right no-repeat;
	padding-right: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .lower ul.panel_links {
	float: left;
}

#panel .lower ul.panel_links a.usercp {
	background-image: url(images/twilight/icons/usercp.gif);
}

#panel .lower ul.panel_links a.modcp {
	background-image: url(images/twilight/icons/modcp.gif);
}

#panel .lower ul.panel_links a.admincp {
	background-image: url(images/twilight/icons/admincp.gif);
}

#panel .lower ul.user_links {
	float: right;
}

#panel .lower ul.user_links li a {
	padding: 0;
}

#panel .upper {
	background: #0f0f0f url(images/twilight/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 7px;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
	color: #fff;
}

#panel .lower {
	background: #efefef;
	color: #999;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
	padding: 5px;
}

#panel .lower a:link,
#panel .lower a:visited {
	color: #666;
}

#panel .lower a:hover,
#panel .lower a:active {
	color: #333;
	text-decoration: none;
}

#panel .remember_me input {
	vertical-align: middle;
	margin: -3px 0 0 5px;
}

#panel input {
	margin: -3px 0;
}

#panel input.button {
	padding: 0;
}

#footer ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer ul.menu li {
	margin: 0 5px;
	display: inline;
}

#footer .upper {
	background: #0f0f0f url(images/twilight/tcat.png) repeat-x;
	padding: 6px;
	overflow: hidden;
	
	font-size: 12px;
}

#footer a:link,
#footer a:visited {
	color: #aaa;
}

#footer a:hover,
#footer a:active {
	color: #fff;
	text-decoration: none;
}

#footer .upper .language {
	float: right;
	margin: -2px;
}

#footer .upper .language select {
	border-color: #000;
}

#footer .upper ul.bottom_links {
	float: left;
	margin: 3px 0 0 -5px;
}

#footer .lower {
	background: #273a46 url(images/twilight/thead.png) top left repeat-x;
	color: #fff;
	border-top: 1px solid #000;
	border-bottom: 1px solid #1d2b34;
	overflow: hidden;
	padding: 6px;
	
	font-size: 11px;
}

#footer .lower a:link,
#footer .lower a:visited {
	color: #fff;
	font-weight: bold;
}

#footer .lower a:hover,
#footer .lower a:active {
	color: #fff;
	text-decoration: underline;
	font-weight: bold;
}

#footer .lower #current_time {
	float: right;
}

fieldset {
	border: 1px solid #ddd;
}

table {
	color: #000000;
	font-size: 13px;
}

.tborder {
	background: #fff;
	width: 100%;
	margin: auto auto;
	border: 1px solid #ccc;
	padding: 1px;
}

.thead {
	background: #273a46 url(images/twilight/thead.png) top left repeat-x;
	color: #ffffff;
	border-bottom: 1px solid #1d2b34;
	padding: 8px;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

.tcat {
	background: #0f0f0f url(images/twilight/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 6px;
	
	font-size: 12px;
}

.tcat a:link {
	color: #fff;
}

.tcat a:visited {
	color: #fff;
}

.tcat a:hover, .tcat a:active {
	color: #fff;
}

.trow1 {
	background: #f5f5f5;
	border: 1px solid;
	border-color: #fff #ddd #ddd #fff;
}

.trow2 {
	background: #efefef;
	border: 1px solid;
	border-color: #fff #ddd #ddd #fff;
}

.trow_shaded {
	background: #ffdde0;
	border: 1px solid;
	border-color: #fff #ffb8be #ffb8be #fff;
}

.trow_selected td {
	background: #FFFBD9;
	border-right-color: #F7E86A;
	border-bottom-color: #F7E86A;
	color: #000;
}

.trow_selected td a:link,
.trow_selected td a:visited,
.trow_selected td a:hover,
.trow_selected td a:active {
	color: #000;
}

.trow_sep {
	background: #ddd;
	color: #000;
	border-bottom: 1px solid #c5c5c5;
	padding: 6px;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
	background: #273a46 url(images/twilight/thead.png) top left repeat-x;
	color: #ffffff;
	border-top: 1px solid #fff;
	padding: 6px;
}

.tfoot a:link {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

.thead input.textbox,
.thead select,
.tfoot input.textbox,
.tfoot select {
	border: 1px solid #1d2b34;
}

.bottommenu {
	background: #efefef;
	color: #000000;
	border: 1px solid #4874a3;
	padding: 10px;
}

.navigation {
	color: #000000;
	font-size: 12px;
}

.navigation a:link {
	text-decoration: none;
}

.navigation a:visited {
	text-decoration: none;
}

.navigation a:hover, .navigation a:active {
	text-decoration: none;
}

.navigation .active {
	color: #000000;
	font-size: small;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

input.textbox {
	background: #ffffff;
	color: #000000;
	border: 1px solid #ccc;
	padding: 3px;
	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

textarea {
	background: #ffffff;
	color: #000000;
	border: 1px solid #ccc;
	padding: 2px;
	line-height: 1.4;
	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

select {
	background: #ffffff;
	padding: 3px;
	border: 1px solid #ccc;
	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

input.button {
	padding: 2px;
	cursor: pointer;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #ccc;
}

.autocomplete {
	background: #fff;
	color: black;
	border: 1px solid #ccc;
	padding: 1px;
}

.autocomplete_selected {
	background: #426276;
	color: #fff;
}

.popup_menu {
	background: #fff;
	border: 1px solid #ccc;
}

.popup_menu .popup_item {
	background: #efefef;
	color: #000;
}

.popup_menu .popup_item:hover {
	background: #426276;
	color: #fff;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(images/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(images/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(images/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.hiddenrow {
	display: none;
}

.selectall {
	background: #FFFBD9;
	border-bottom: 1px solid #F7E86A;
	color: #000;
	text-align: center;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 20px;
	
	font-size: 11px;
}

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 4px;
font-size: 11px;
}

blockquote a:link {
font-size:13px;

color:#600000;
}

blockquote a:visited {
text-shadow:white;
color:#600000;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	margin: 4px 0;
font-size: 11px;
}

blockquote cite a:link,blockquote cite a:visited {
font-size: 13px;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	margin: 4px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.subforumicon {
	border: 0;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 4px;
	white-space: nowrap;
	
	text-decoration: none;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding-top: 3px;
	padding-bottom: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/error.gif) no-repeat 0;
}

div.error.ul {
	margin-left: 24px;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 3px 6px;
	margin-bottom: 3px;
}

.pagination a {
	background: #f5f5f5;
	border: 1px solid #ccc;
}

.pagination .pagination_current {
	background: none;
	color: #000;
	border: none;
	
	font-weight: bold;
}

.pagination a:hover {
	background: #426276;
	color: #fff;
	border-color: #273a46;
	
	text-decoration: none;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
	margin-top: 7px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_buttons {
	background: #f5f5f5;
	padding: 3px 3px 0 3px;
	border-bottom: 1px solid #ddd;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url(images/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

.repbox {
	font-size:16px;
	font-weight: bold;
	padding:5px 7px 5px 7px;
}

._neutral {
	background-color:#FAFAFA;
	color: #999999;
	border:1px solid #CCCCCC;
}

._minus {
	background-color: #FDD2D1;
	color: #CB0200;
	border:1px solid #980201;
}

._plus {
	background-color:#E8FCDC;
	color: #008800;
	border:1px solid #008800;
}

.pagination_breadcrumb {
	background-color: #efefef;
	border: 1px solid #fff;
	outline: 1px solid #ccc;
	padding: 5px;
	margin-top: 5px;
	
	font-weight: normal;
}

.pagination_breadcrumb_link {
	vertical-align: middle;
	cursor: pointer;
}

form #message {
    width: 500px;
}
.asb_custom_1_main_5 thead {display: none!important;}
.move_right {position:relative; right:-60%;}

Also forum.css

#content {overflow: visible !important;}

The reason for forum.css was because Desktop Opera was displaying all pages completely fraggled. This line fixed things in Opera. Not sure if it's the cause of the issues with standard theme on mobile or no.

Thanks for any help on this. The first 3 (posts and thread list) are not looking correct at all. The 4th (index) is fine and how all areas should hopefully be.

---

Okay, have solved the issue with image 3 (thread list). This was due to

.move_right {position:relative; right:-60%;}

The <div> was closed properly, but for some reason it continued to affect the entire page. Removing the div move_right call fixed the problem (though the 'new thread' button is right next to multipages, still it doesn't look bad).

I'm still having a problem with as you see in image 1 and image 2 (show thread). I can't figure out what the problem is here. I've replaced showthread with untouched template and the problem remains. Anyone has an idea here, that's appreciated.

Bump. Anyone can help with this? Posts running way off the page in mobile. I've tried replacing CSS with default CSS, have tried replacing showthread with default showthread, it's still happening. Can't figure it out. Working fine on desktop. Not just this post, but many posts.

Bump....

EDIT: nvm, it's on screen.

It's quite normal that desktop theme looks weird on mobile, unless it's responsive/adaptive/whatever. Why not simply use GoMobile which you have installed and default for mobile users?

Anyways, you can try to change this:

#content {overflow: visible !important;}

to:

#content {overflow: auto !important;}

but that will most likely break Opera again.

Thanks for your reply here Destroy666.

I don't think the site looks bad with the desktop theme. I actually prefer it in some ways, though performance is an issue with older mobiles....I'd like to keep it an open option.

I tried your suggestion, and what we're getting now is as you see in the newly attached image. I've tried a couple of other apart themes and the result is similar. Even without the css container widths (i thought that may have been part of the problem, but it's not so)

I find it odd there's no way to keep the post content 'in the page' and without getting cut off. There must be some solution to it, but it's beyond me.

Well if any other suggestions, please let me know. Thanks

I told you man...

(2013-11-11, 04:22 PM)Destroy666 Wrote: [ -> ]It's quite normal that desktop theme looks weird on mobile, unless it's responsive/adaptive/whatever.

All themes which don't belong to any of bolded groups will be displayed like this. Default MyBB, Apart, Dark Fusion etc. You can try to download few from mods site or buy premium - it will have the same result. And it's not 5 lines of CSS to fix it throughout the whole forum, rather 500 + HTML edits + possible JS and PHP edits. So, if you want, you can keep looking for solution, but that isn't as easy to achieve as you think.

(2013-11-12, 04:28 PM)Destroy666 Wrote: [ -> ]I told you man...

(2013-11-11, 04:22 PM)Destroy666 Wrote: [ -> ]It's quite normal that desktop theme looks weird on mobile, unless it's responsive/adaptive/whatever.

All themes which don't belong to any of bolded groups will be displayed like this. Default MyBB, Apart, Dark Fusion etc. You can try to download few from mods site or buy premium - it will have the same result. And it's not 5 lines of CSS to fix it throughout the whole forum, rather 500 + HTML edits + possible JS and PHP edits. So, if you want, you can keep looking for solution, but that isn't as easy to achieve as you think.

So mobile theme it is.

I'm still amazed there's no way to easily set a table/div width % for the post body, and have the text wrap within it. But my knowledge is very limited regarding this. You've made it clear it's not easy to achieve. Thanks for taking the time to answer