Not Solved Post body padding
#1
Not Solved
Hello guys,

I just started using mybb, and I'm now experiencing an issue. I'd really appreciate it if someone could help me.

So basically, when you post a small reply/thread (for example one line), the post body takes a minimum space, which makes replies a bit not organized. 

[Image: K8k9BCE.png]

I wanted to change it and make it a little bit look like vbulletin style (so that it takes at least the same as the classic profile's height). So I tried adding a padding in the bottom of the post body.

I inspected the element and tested it there and it did work.

[Image: uB0yVv7.png]

Then, I went to Themes -> [my theme] -> global.css -> .post_body.
I added this line but it did not change anything: padding-bottom: 11em;

[Image: Vt1ldCl.png]


Someone please help.
Thank you Big Grin
Reply
#2
Not Solved
Hi, 

as you show in your last image, in the "Extra CSS Attributes", there is:

padding: 12px 0;
padding-bottom: 11em;


There is the problem, if you read the CSS padding "manual":
Quote:If the padding property has two values:

Example: padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px

You are telling your css script to have 12 px padding-bottom (first line), and padding-bottom: 11 em (second line), and the browser chooses the first one, and that's the reason that there's no change at all.

Change the two lines in one with:
padding: 12px 0 11em;

because:
Quote:If the padding property has three values:

Example: padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px

More info:
https://www.w3schools.com/css/css_padding.asp
I don't answer questions about localhost forums or forums without URL, I'm not a seer.  Cool
Reply
#3
Not Solved
Yeah I noticed that yesterday and I had it fixed, but nothing seems to change.
The problem that I have is inability to modify global.css file, cause I tried modifying other things (colors, font sizes..etc) and it doesn't work, it just messes with some fonts and freezes until I reset the .css file, and it keeps happening over and over.

I granted all permissions over that file (0777), but nothing changed :|
Reply
#4
Not Solved
(2018-09-06, 06:06 PM)NoRules Wrote: Hi, 

as you show in your last image, in the "Extra CSS Attributes", there is:

padding: 12px 0;
padding-bottom: 11em;


There is the problem, if you read the CSS padding "manual":
Quote:If the padding property has two values:

Example: padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px

You are telling your css script to have 12 px padding-bottom (first line), and padding-bottom: 11 em (second line), and the browser chooses the first one, and that's the reason that there's no change at all.

There should still be padding with what the OP put, either the browser will replace the 12px (top and bottom) with the 11em OR it will add to the padding. Either way there should be some result.

OP i see you're using px and em, not sure if you mean to do that, but lookup the difference between the 2 units, rather stick to px if you're unsure.

Are you pressing CTRL+F5 after making these changes? This is needed to hard refresh the page so that the CSS changes can take effect. There's no need to mess with permissions for this - go to your ACP -> click on Tools & Maintenance, and then scroll down the page. If you have all green ticks there, then your permissions are all fine.
What goes around comes around
Reply
#5
Not Solved
The hard refresh worked, thanks man Heart
and yeah, I used px instead, I replaced the whole padding line with: padding: 6px 0 167px 0;

I still have a small issue, is there any way I can have this implemented: I want the default padding to be like this:

[Image: lEABV0y.png]

But, when the post contents exceed that area, there's no need of this blank space:

[Image: UFK4vgt.png]

Maybe I should edit something in HTML?
Reply
#6
Not Solved
You should use flex for this:

https://www.w3schools.com/css/css3_flexbox.asp
What goes around comes around
Reply
#7
Not Solved
Could you please help me with the code? I'm not really that good with CSS
Reply
#8
Not Solved
I don't think he needs flex. Why don't you set a minimum height to the .post_body with css instead of padding?
The css should be something like that changing the px of min height:
padding: 6px 0;
min-height: 400px
My Projects - Support My Projects

Don't forget to rate posts!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)