Changing post layout…child theme or block editor?

[PolyWogg]

So I’m convinced the “glitch” is something to do with sidebars. I have two pages that are almost identical for content…

For this one, I left the per page rules to “normal” i.e. default of right sidebar and FI is beside page, no wrap. Everything works the way it should. This one doesn’t have the calendar box as before, but everything in the content box is indented and aligned with side of Title, and if Title is 1-3 lines, no difference, everything just slides down or up as needed. It “works” the way the FI layout is supposed to work — beside page, no wrap around it, all good.

https://polywogg.ca/castle-season-1-pwtvr00001-copy/

If I go to the second page, and all I do is turn off the sidebar, the layout totally changes for the FI too … FI beside page no longer works, it switches essentially to “with title” as the layout, turning FI + Layout into one box that the content area can’t slide up into. You gave me code to indent it, and I can do that, but it still won’t automatically slide up. Because when you remove the sidebar, that top box merges as one big container and nothing can just “slide up” past the edge. I can try to “position it”, but then it would depend on how many lines in the title. As opposed to the FI beside page, no wrap layout, that works just fine. It’s almost like when you turn off sidebars, it is “linking” to the wrong template after that.

https://polywogg.ca/castle-season-1-pwtvr00001/

I feel like if I could “fix” that linking to the wrong template, then we could still do the calendar box. But as I said, it seems like I have to choose between it sliding up just fine because the BESIDE PAGE, NO WRAP works fine with sidebars, OR I have to mess around with moving the contents when there aren’t any sidebars.

Paul

[scrambler]

OK, now we are getting somewhere…

This was a weird one, and it took me a while to find out.

The problem comes form a difference in the overflow property of the article container.
Depending on the sidebar configuration, One is set to visible and the other one to hidden.

Hidden is usually the preferred setting (used for no sidebar), but the no sidebar layout required visible to work properly, and that turns out to have an impact on the FI (rarely used)

So just add the rule below to force the Article Overflow to hidden on single post pages and the problem should be fixed

article.content-single {overflow:hidden !important;}

Look around to see if that has any perverse effect…
And if you have the problem on other pages (not just single post pages), try the more general rule

article {overflow:hidden !important;}

[PolyWogg]

We have liftoff! 🙂

I played with those when I was looking at the inspect for the pages, and tried toggling them on/off but in the wrong spot I think and potentially for the wrong version. I wasn’t quite sure what they were doing. 🙂 But I can safely say I would *never* have thought of that as even a remote possibility, even when I was toggling things on and off. I’ll keep an eye out for perverse effects.

Looks fine on mobile still (my first image is a bit large for there, might have to resize that one on each).

On the other hand, I also found something a bit amusing. For the REALLY tall FI that I had (150 x 177), I wanted to see how it lined up with the calendar box. So I set it, which I haven’t done for quite some time. Annnnd, it doesn’t even fit in the square because the container is 150×150. So the max was always set apparently. It looked like it was going bigger than 150 on a couple, but what it was “trimming” was mere whitespace. So I’ll have to resize a couple anyway to max 150 for height.

So I do want to check my understanding of some code for the positioning of the box…

/*Style calendar box on desktop*/
.entry-meta .mycalend {
position:absolute;
width:150px;
left:2%;
margin-top:115px;
text-align:center;
}

Am I correct that when it does the absolute positioning, and then margin-top is 115px (what I need on some larger FIs with only one line of text), it seems “relative” to the bottom of the title…i.e. relative to where the normal info line would be. Soooo, if I have a two-line title, it shoves the box down a bit farther. Which is great for lining up with the first paragraph of text of the box, but if I wanted to hold it relative to the top of the page, instead of the bottom of the title, is there an easy way to do that?

Paul

[scrambler]

To make it relative to the top of the header so the height of the title does not matter, change the margin-top to simply top, with a bigger value like below.

Like that, only make sure the value clears the tallest image

/*Style calendar box on desktop*/
.entry-meta .mycalend {
top:250px;
position:absolute;
width:150px;
left:2%;
text-align:center;
}

[PolyWogg]

Perfect, or so I thought. Until I went to a category archive page and it only shows the calendar for the first one, also overlapping higher than it should (because it is 250 from the top, not 250 from the top of the post). Sigh. I think I’ll live with the relative one. 🙂

https://polywogg.ca/book-reviews/

Paul

[scrambler]

Yep, sorry, forgot it was not just a single one at top of page…

No solution I am afraid then as the reference we would want is the top of the FI, but that is not a parent of the calendar.

[PolyWogg]

Thanks Scrambler, that’s what I figured. But it’s all working otherwise, so I’m calling it “done” for now 🙂

Thanks again for all your help…

Paul

[Author]

Posts