- This topic has 9 replies, 3 voices, and was last updated 3 years, 1 month ago by Ying.
-
AuthorPosts
-
February 10, 2021 at 8:13 pm #1653827Mike
I’m suffering an annoying issue with bbpress on my site https://oysterfares.com. If I click on the link for the latest post in a topic (it’s the time since posting in the final column on the latest posts table on the homepage) then it takes me to the topic but everything before the latest post is hidden. If I view page source then it’s all there but there’s no way to scroll up the topic unless you take the /#post-720 off the url and reload the page.
I looked in bbpress support and they suggested switching theme to a bundled one (twenty twenty-one in my case). When I did this the problem went away. The page displayed at the position of the last post but you could scroll up through the earlier posts.
It appears to be an issue where the url ends with #something. Do you have any ideas?
February 11, 2021 at 6:14 am #1654308DavidStaffCustomer SupportHi there,
this CSS in your Simple CSS is creating the issue:
div#page { background-color: #ffffff; overflow: hidden; }
If you remove the overflow hidden property then you will see the entire page.
February 11, 2021 at 9:49 am #1654790MikeThank you David,
The problem is that that CSS is handling making the sidebar(s) stretch down the full length of the page as per:
div#page { background-color: #ffffff; overflow: hidden; } div#right-sidebar, div#left-sidebar { margin-bottom: -99999px; padding-bottom: 99999px; background-color: #c0c8ea; }
Do you have any other ideas how to achieve one without the other side effect?
February 11, 2021 at 4:11 pm #1655140YingStaffCustomer SupportHi Mike,
Remove the
overflow:hidden;
And try this CSS to extend the sidebar:.site-content, #right-sidebar { display: flex; } #right-sidebar .inside-right-sidebar { display: flex; flex-direction: column; } #right-sidebar .widget:last-child { flex: 1; }
Let me know π
February 11, 2021 at 7:16 pm #1655211MikeHi Ying,
It’s almost there. The sidebars stretch to the full column depth, but the widths are different. The right sidebar escapes the overall page width by about 10px. I’ll leave it with your code on while I try and read up a bit about flex.
Thanks for your help so far. π
February 12, 2021 at 10:03 am #1656157YingStaffCustomer SupportYou are welcome Mike, you could add this CSS:
.inside-right-sidebar { max-width: 100%; }
Let me know how it goes.
February 12, 2021 at 3:31 pm #1656422MikeHi Ying,
That sorted it, thanks. At least for the 20-60-20 displays on laptops/tablets. I’m terribly sorry to notice too late that on mobiles it’s now trying to display all three sections next to each other rather than the 60 (main content) first and each of the 20’s (sidebars) underneath. I have a horrible feeling that I’m trying to push GP beyond where it’s designed to go, so please do say so if that is the case.
I really appreciate your assistance to date.
Mike.February 12, 2021 at 3:40 pm #1656429YingStaffCustomer SupportNo worries, we try our best to help π
Give this a try:
@media (max-width: 768px) { .site-content { flex-direction: column; } }
February 12, 2021 at 4:22 pm #1656449MikeThanks! I actually just tried adding “flex-wrap: wrap” to the .site-content class and that seems to do what I want. Thanks once again for all your help.
February 13, 2021 at 11:59 am #1657199YingStaffCustomer SupportNice!
Glad you figured it out π -
AuthorPosts
- You must be logged in to reply to this topic.