MyBB Community Forums

Hi guys,

I would like to ask you for help - I made some changes into my MyBB default theme. Now I am getting hard time how to make it working properly. I need to have these two objects (online status and thread starter) icons compatible with my fluid with theme. It works fine if you have HD resolution, it is positioned perfectly, but because of fluid width of theme it looks ugly when you resize the window - these two icons are not positioned correctly. How to fix that?

Can you help me please somehow?

url: http://carcassonneforum.4fan.cz/Thread-T...949#pid949

I tried same approach as here for arrow, but without success
https://community.mybb.com/thread-189671...pid1211355

Thank you very much!

EDIT:
Here is how it should look like:
[attachment=37099]

Here is how it shows when you resize the window - online status and thread starter icons are moved to the left:
[attachment=37103]

Bump

Here is small part of code from my postbit template:

{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic post_{$usergroup['gid']} {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
<div class="post_author scaleimages">
{$post['useravatar']}
<if $thread['uid'] == $post['uid'] then><span style="position: absolute; margin: -5.5% 0% 0% 3%;"><i title="Autor tématu" alt="Autor tématu" style="background-color: #fcb941; border-radius: 50%; border: 1px solid #ddd; color: #fff; padding: 3px; vertical-align: top; width: 13px; height: 13px;" class="fa fa-star"></i></span></if><span style="position: absolute; margin: -6.4% 0% 0% 3.8%;">{$post['onlinestatus']}</span>
<div class="author_information">
<strong><span class="largetext">{$post['profilelink']}</span></strong><br />
<span class="smalltext">
				{$post['usertitle']}<br />
				{$post['userstars']}
				{$post['groupimage']}
				{$post['additional_images_html']}	
</span>
	</div>
	<div class="author_statistics">
{$post['user_details']}
	</div> ...

Here is my postbit_online template:

<a href="online.php" title="{$lang->postbit_status_online}"><i alt="{$lang->postbit_status_online}" style="background-color: #49b113; border-radius: 50%; width: 13px; height: 13px; border: 1px solid #ddd; color: #fff; padding: 3px; vertical-align: top;" class="fa fa-check"></i></a>

I think there is an issue with missing <div> - but I dont know how to fix it properly  

Maybe use relative and absolute div couls solve this?

Firstly, you are seriously using inline styling too much in your code ... I can get why you would want to use it for some one-off adjustments, but so many of your styles are inline.

I'll take a look at this later, but my feeling is that the icons should be inside div.author_avatar.

Hi, it would be awesome. I am lost not good CSS knowledge. Thank you in advance!

Bump, anyone please?

Uhm, not sure if my option is the best one but you could use media queries to re align the icons once the window is resized? I know its not the most convenient method but it does the job pretty well.

As you can see here :- https://gyazo.com/66c46dc037c9947814e6b660d8aaa0d0
I did this in dev tools after resizing the window to the most extreme min

You have a div with a class 'author_avatar' : that is your target div from where you have to set mergins of your absolute positioned icons. Hence you have to move your both absolute <span>s  inside the very beginning of the 'author_avatar' div and margin icons considering that div as immediate parent. Something like:

Thank you, thats the issue. I just changed px to % and move them to correct template.

Than you again, +1! Have a nice day/night

I strongly recommend using 'px' in this case as in case of fluid design % value changes on resizing viewport. Your icons will surely dislocate one over another. Using 'px' will be constant in any case as your avatar size is fixed 75px * 75px, not % value.