Too wide gap between avatar and text field

[Jarppi]

Hello,
I have tried to find the right parameter how to make text area closer to Avatar box from theme I use. I guess some where in index.css it can be found but which parameter will do the trick? Please look the scree capture that explains what I mean
Theme: Black Rain
SMF 2.0.15

[Antes]

check the .poster class width in your index.css

[Jarppi]

That did not help with poster width change. Gap is still same size....
As you can see from the Personal text part is going way too wide.

[shadav]

I believe you will need to change both the .post and .poster

[Jarppi]

Did not help either....

[Sir Osis of Liver]

Which theme?

[shadav]

would help to know which theme

sometimes also there may be other css files that need edited as well.... maybe an index.mini.css or responsive.css or rtl.css, ect.... of which all files would need to be changed to match each other

[Illori]

 a link to your forum where the issue is happening would make it easier. sometimes mods can make changes that are not expected as well. looking at your forum would let us tell you exactly what is needed to fix the issue.

[Jarppi]

Ok here you go, have a look
http://finnbikers.fi/foorumi/index.php

Theme is Black Rain on 2.0.15
I guess it's not that wide gap but could try to get it closer to Avatar and author info.

[Antechinus]

Ok, check this.

1/ If you right click anywhere on your screen,
2/ then select "Inspect Element ()",
3/ then left click on anything you want to know about,
4/ you get what is shown in the first screenshot.

You can then click on anything else you want to know about. Works in Firefox, Chrome, Opera and Pale Moon. Probably works in Edge too (I don't have it) but is broken in IE11.

Anyway, adjust the width of .poster to what you want, then adjust the left margins on .postarea and .moderatorbar to match the width of .poster. This works on most 2.0.x themes.

[Sir Osis of Liver]

index.php

Code Select Expand



.poster
{
width: 15em;
float: left;
}
.post
{
clear: right;
}
img.smiley
{
vertical-align: bottom;
}
.postarea
{
margin-left: 16em;
}



Change width for .poster and margin-left for .postarea.

but is broken in IE11.

? Works for me in IE11.

[Antechinus]

No, not the CSS. I mean IE11 dev tools. They're borked. The "Inspect Element" thing won't work. The CSS is fine.

[Sir Osis of Liver]

Sure it works, was using it before I recently switched to FF as primary browser (better security).  Just tried it and it works fine.

[Antechinus]

Which OS? It's borked on W7.

[Sir Osis of Liver]

Win 8.1