Responsive Postbit / Showthread

[Kieria]

Hello! Hope you are doing all great! Could someone help me out with making responsive postbit like over here: 

http://prntscr.com/tc6g9e

Any ideas what exactly I need to edit, which templates? I have been playing with some codes, styling but nothing comes near what I'm trying for. I have been editing postbit_classic template.. 

Thank you in advance..

[WallBB]

postbit_classic is the correct template that you need to edit. You need to force it to all users to use the classic postbit.
To make postbit responsive, you can use css media query or flexbox or grid.
Here is an example using CSS media query

Template - postbit_classic

{$ignore_bit}{$deleted_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
<div class="authinfo">
	{$post['useravatar']}
	<div class="author_information">
			<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
			<span class="smalltext">
				{$post['usertitle']}<br />
				{$post['userstars']}
				{$post['groupimage']}
			</span>
	</div>
	<div class="author_statistics">
		{$post['user_details']}
	</div>
</div>
<div class="authpostcontent">
	<div class="post_head">
		{$post['posturl']}
		{$post['icon']}
		<span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
	{$post['subject_extra']}
	</div>
	<div class="post_body scaleimages" id="pid_{$post['pid']}">
		{$post['message']}
	</div>
	{$post['attachments']}
	{$post['signature']}
	<div class="post_meta" id="post_meta_{$post['pid']}">
		{$post['iplogged']}
		<div class="float_right">
			{$post['poststatus']}
		</div>
	</div>
	{$post['input_editreason']}
</div>
<div class="post_controls">
	<div class="postbit_buttons author_buttons float_left">
		{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
	</div>
	<div class="postbit_buttons post_management_buttons float_right">
		{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
	</div>
</div>
</div>

CSS

.authpostcontent{
    overflow: hidden;
}
.authinfo{
    width: 22%;
    float: left;
    margin-right: 10px;
}

@media only screen and (max-width: 420px) {
.authinfo{
    border: 0 none;
    float: none;
    margin-right: 0;
    width: auto;
}
}

NOTE:- This is a rough code I wrote as an example, you will need to edit it to make it suitable for your needs

Regards
WallBB

[Kieria]

Thank you WallBB! I managed to get what I wanted. Some changes with the codes and css and I got the result I wanted, also learned a bit more how to make pages responsive thanks for the guidance!