2023-06-21, 05:41 PM
hello!
so, i'm editing a theme and want the same look on mobile as on desktop. so far its been no problem, as im not dealing with any crazy coding. the only issue i've run into is when viewing a thread, on desktop the post author info is floated to the left of the actual post itself, vs on mobile, the author info is now above the posts themselves. attached are some images of this. any idea how to get the mobile version to match the desktop version?
i was assuming the issue would be in the "show thread" template but i'm unsure.
below is the show thread template code if needed!
so, i'm editing a theme and want the same look on mobile as on desktop. so far its been no problem, as im not dealing with any crazy coding. the only issue i've run into is when viewing a thread, on desktop the post author info is floated to the left of the actual post itself, vs on mobile, the author info is now above the posts themselves. attached are some images of this. any idea how to get the mobile version to match the desktop version?
i was assuming the issue would be in the "show thread" template but i'm unsure.
below is the show thread template code if needed!
<html>
<head>
<title>{$thread['subject']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
var quickdelete_confirm = "{$lang->quickdelete_confirm}";
var quickrestore_confirm = "{$lang->quickrestore_confirm}";
var allowEditReason = "{$mybb->settings['alloweditreason']}";
lang.save_changes = "{$lang->save_changes}";
lang.cancel_edit = "{$lang->cancel_edit}";
lang.quick_edit_update_error = "{$lang->quick_edit_update_error}";
lang.quick_reply_post_error = "{$lang->quick_reply_post_error}";
lang.quick_delete_error = "{$lang->quick_delete_error}";
lang.quick_delete_success = "{$lang->quick_delete_success}";
lang.quick_delete_thread_success = "{$lang->quick_delete_thread_success}";
lang.quick_restore_error = "{$lang->quick_restore_error}";
lang.quick_restore_success = "{$lang->quick_restore_success}";
lang.editreason = "{$lang->postbit_editreason}";
// -->
</script>
<!-- jeditable (jquery) -->
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
<script src="{$mybb->asset_url}/jscripts/jeditable/jeditable.min.js"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/thread.js?ver=1808"></script>
</head>
<body>
{$header}
{$threadnotesbox}
{$pollbox}
<div class="float_left">
{$multipage}
</div>
<div class="float_right">
{$newreply}
</div>
{$ratethread}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder tfixed clear" style="background:#444;">
<tr>
<td class="thead">
<div class="float_right">
<span class="smalltext"><strong><a href="javascript:;" id="thread_modes">{$lang->thread_modes}</a>{$threadnoteslink}</strong></span>
</div>
<div>
<strong>{$thread['threadprefix']}{$thread['subject']}</strong>
</div>
</td>
</tr>
<tr><td id="posts_container">
<div id="posts">
{$posts}
</div>
</td></tr>
<tr>
<td class="tfoot">
{$search_thread}
<div>
<strong>« <a href="{$next_oldest_link}">{$lang->next_oldest}</a> | <a href="{$next_newest_link}">{$lang->next_newest}</a> »</strong>
</div>
</td>
</tr>
</table>
<div class="float_left">
{$multipage}
</div>
<div style="padding-top: 4px;" class="float_right">
<div id="slidetoggle"><i class="fa fa-wrench" aria-hidden="true"></i> Topic Options</div>{$newreply}
</div>
<div id="slidepanel"> <div class="float_left">
<ul class="thread_tools">
<li class="printable"><a href="printthread.php?tid={$tid}">{$lang->view_printable}</a></li>
{$sendthread}
<li class="subscription_{$add_remove_subscription}"><a href="usercp2.php?action={$add_remove_subscription}subscription&tid={$tid}&my_post_key={$mybb->post_code}">{$add_remove_subscription_text}</a></li>
{$addpoll}
</ul>
</div>
<div class="float_right" style="text-align: right;">
{$moderationoptions}
{$forumjump}</div>
</div>
<br class="clear" />
<a name="switch" id="switch"></a>{$quickreply}
{$threadexbox}
{$similarthreads}
<br />
<br class="clear" />
{$usersbrowsing}
</div>{$footer}</div>
<div id="thread_modes_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><a href="showthread.php?mode=linear&tid={$tid}&pid={$pid}#pid{$pid}" class="popup_item">{$lang->linear}</a></div><div class="popup_item_container"><a href="showthread.php?mode=threaded&tid={$tid}&pid={$pid}#pid{$pid}" class="popup_item">{$lang->threaded}</a></div></div>
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
$("#thread_modes").popupMenu();
}
// -->
</script>
<script type="text/javascript">
$(".author_avatar img").error(function () {
$(this).unbind("error").closest('.author_avatar').remove();
});
</script>
</body>
</html>
<script>
$(document).ready(function(){
$("#slidetoggle").click(function(){
$("#slidepanel").fadeToggle(700);
});
});</script>
<style>
#slidetoggle{padding: 5.4px 15px; background: #222;color:#f5f5f5;cursor:pointer;display:inline-block;border-radius:5px; }
#slidetoggle:hover {color:#f5f4f9;background-color:#000;border-color:#222;opacity: 0.6;-webkit-transition: all 250ms ease-in-out;-moz-transition: all 250ms ease-in-out;-o-transition: all 250ms ease-in-out;transition: all 250ms ease-in-out; }
#slidepanel{display:none;text-align:left; padding:65px 20px}
</style>
</body>
</html>