Journal Whole Page Width Issue

[sireesanwar]

 Okay I've been working on Transmogrified as other themes I had some major frustrations with. I think I've figure most things out but suddenly I realized there is a horizontal scrollbar when there shouldn't be.


You can see it at sireesanwar . I can not figure out why my journal is like 150% wide. Anyone see what I'm not?

Comments

[sireesanwar]

After messing around with this some more I added overflow-x: hidden; to the body section and it went away. I don't know if that is the solution, but it worked.

That didn't work so I tried overflow-x: clip;
I think this prevents accidental scrolling over but that excess space isn't gone and I can't figure out why there is extra room there.

[momijizukamori]

I was also deeply puzzled and threw this at a coding server I'm on to see if anyone else had ideas, and someone discovered that the problem seems to be that h2#subtitle has a width of 100% and then the absolute positioning on it causes it to inherit the width of the entire page because of the way positioning works. If you remove the width (or set it to something smaller) it seems to fix the issue!

[sireesanwar]

Oh my goodness. That does make sense. I probably did that when trying to position it and didn't even realize I'd done it. Thank you so much! I can't believe it. Finally. I was trying to get it to stop scrolling on my journal and if I tried screencapturing the entire page it would do strange things.

Thank you!

[sireesanwar]

You know after making those edits there are still some overflow issues. It is almost fixed but the scrollbar didn't go away it just doesn't scroll over now... but it is like there is still some issue and when I inspect the coding the controlstrip and a few other elements say they are causing overflow but I'm unsure why.

[momijizukamori]

Oh - try adding #lj_controlstrip { box-sizing: border-box} (or, alternatively, #lj_controlstrip {width: calc(100%-2px);} but I think box-sizing is probably less confusing).

[sireesanwar]

That definitely did it. I did the border-box option. All of the sudden the bar and the bottom disappeared. And now everything seems to be working perfectly. Thank you!!!

[momijizukamori]

Whoohoo! Yeah, width: 100% frequently behaves in confusing ways, unfortunately.

[sireesanwar]

Apparently, so. I mean I know something about coding but I'm not an expert so at times I come across things that I just don't understand. So thanks again...

I used your width: calc(100%-2px) for another element that at 100% was not inline with everything else and now is perfect. So thanks for that too.

[momijizukamori]

Yeah - basically, with the default box model, the width and height properties don't include border/padding/margins - so it ends up being 100% + however much those are (in this case, 2px, because of the 1px border on each side), and that can end up being more than 100%. The box-sizing: border-box makes the width calculation include border/padding (though not margin).

[sireesanwar]

Interesting. I didn't know that. That is good to know. Thank you.