Technical Details

Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Google Chrome, Internet Explorer
Screenshot of problem : https://2img.net/h/i1172.photobucket.com/albums/r566/freestatesofns/free%20states%20screenshot_zpsosi2wvsx.png
Who the problem concerns : All members
Forum link : http://www.thefreestates.com

Description of problem

I tried to attach a screenshot, if it didn't work here's the link:
https://2img.net/h/i1172.photobucket.com/albums/r566/freestatesofns/free%20states%20screenshot_zpsosi2wvsx.png

I can't figure out how to get rid of the space between the post body and our profile/avatar. I thought the problem was the width of the post profile in CSS, but I can reduce it to the maximum width of the avatar (150px) and all that happens is the thin darker blue line moves close to the avatar. It doesn't move the post body any closer.

I also tried increasing the width of the post body, but then if I shrink the window the avatar doesn't line up with the post and instead displays under the post.

I also tried setting both widths to be a percentage, which worked the best, but still if I shrank the screen to the point that 150px was > the percentage of the page I had for profile, then the avatar would cover part of the post. I think the profile-post is going to have to be a fixed size > maximum width of avatar.

What I want: The space between my avatar and my post body to be much smaller. When I shrink the window, I want the post body not to push the post profile down below.

I finally kept thinking until I solved this on my own. Going to post what worked for me (maybe it'll help someone else stuck) and then mark this solved.

I set a my .postbody at 86%, and my .postprofile at 13% (this is what I thought looked best for my forum theme. Code below:

Code:

.postbody { 
width: 86%  !important;
}

Code:

.postprofile{
width: 13%;
}

The part I hadn't figured out above was then I needed to tell the forum not to let avatars display at more than 100% of .postprofile size. The code I used to do that was:

Code:

.postprofile dt img{
max-width: 95%;
}

Now no matter how many pixels the profile section is on the topic page, an avatar will be resized to take up 95% of that section's width, so it won't flow out and cover sections of text. And because the two sections are percentages, no matter the width of the screen they won't overlap one another and force one below.

Hope that helps someone.

Thanks for posting the solution that worked for you.

Problem solved & topic archived. Please read our forum rules:  ESF General Rules