Sidebar and TOC on Tablets

Hi @rpladmin

I hope you are fine.

I am sorry, but, custom breakpoint is not possible. The TOC should be collapsed and displayed in the top if you enable it from the settings, and the sidebar, by default it is disabled for small device, so, I am not clear about the scenario that you are talking about. Please share a screenshot and page link where you are facing the issue.

Thanks

Hello,

Many thanks for your reply.

The scenario is the one I explained above: “For 820 tablets, for example, things get pretty cramped.” Take a look at your own help page on an 810 iPad – it’s too cramped.
https://betterdocs.co/docs/activate-betterdocs/
The mobile menu you refer to is great on small devices, as you say, but it needs to kick in earlier i.e. on larger tablet devices that are now available.

Can it not be done with media queries?

• This reply was modified 2 months ago by rpladmin.

Hi @rpladmin,
Greetings. Hope you are doing well.

Regarding your query, you can use media query CSS to hide the sidebar and show the navigation from 1024px devices which is iPad PRO. Below is the custom CSS code. Please add this and check and let me know how it goes.

@media only screen and (max-width: 1024px) {
  .betterdocs-mobile-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 12px;
    margin-top: 18px;
    margin-bottom: 32px;
    border-top: 1px solid #EAECF0;
    border-bottom: 1px solid #EAECF0;
  }
  #betterdocs-sidebar {
    display: none;
  }
}

You can simply add custom CSS by navigating to your WordPress Dashboard -> Appearance -> Customize.
After you are on the Customizer page, search for the “Additional CSS” option. You can then go ahead and insert CSS Code. Please check this screencast to learn more – https://d.pr/v/QrrfTw

Thanks.

Hi there,

Many thanks for this. Unfortunately there’s a couple of issues.

It doesn’t actually render unless we add “!important” tags to each of the properties for the “betterdocs-mobile-nav” class but even then the betterdocs-sidebar id does not hide the left sidebar – if we change it to a class, it does but it just leaves a blank space where the left sidebar was, and the main content div does not expand to the full device width.

Hi @rpladmin,
Greetings. Hope you are doing well.

Thanks for your reply. Please add the !important value on the CSS code. For the sidebar, please use this code –

@media?only screen and (max-width: 1024px)?{
#betterdocs-sidebar?{
display: none !important;
}
}

Hope this will help you out. If this doesn’t help please share the exact URL of your doc so that I can check and assist you further.

Thanks.

Hi,

Thanks for your continued support on this. Unfortunately, we can’t share a link currently. But the issue is just surely one of CSS – we have very, very few plugins on this site and we’re using the lightest GeneratePress theme – so it’s not an issue of conflicts. From what we can see, it seems we need to alter the grid-start property on 1024 and below, in order that the main div occupies the full width, no? And regarding the sidebar we already tried an “!important” tag on that property but it’s not hiding on 1024 to 768.

Hi @rpladmin

I hope you are fine.

Well, we have checked the scenario with GeneratePress theme, but, could not replicate the issue on our side. If you are unable to share the page link, then please reach us here and share your issues with relevant screencast/ screenshots.

Thanks

Hello,

Well, with respect, that’s a disappointing response from the BetterDocs team.

First, we are not suggesting that there is any conflict with GP, we were simply saying that we have nothing installed that would cause conflict and anyway, it’s surely just a CSS thing – there is no “issue”.

We are simply asking for the media queries and corresponding CSS that would render the Single Doc layout that we see at 768 and below, also at 1024 and below. The CSS you provided does not do that. We had a look at it but since you know your CSS better than we do, we are reaching out to you for the most appropriate CSS.

Regarding screenshots etc., we have already mentioned that we cannot currently share screenshots (due to the client’s request).

Surely, there must be someone in your team who knows the best CSS to use in order to render the layout we see at 768 and below, also at 1024 and below. No?

Hello @rpladmin ,

Greetings. Sorry for the inconvenience.

Can you please try the following CSS and let me know if it works or not?

@media only screen and (max-width: 1024px) {
.betterdocs-content-area .betterdocs-mobile-nav, .betterdocs-content-inner-area .betterdocs-mobile-nav {
align-items: center;
border-bottom: 1px solid #eaecf0;
border-top: 1px solid #eaecf0;
display: flex
;
gap: 20px;
justify-content: space-between;
margin-bottom: 32px;
margin-top: 18px;
padding: 12px;
}
.betterdocs-wrapper .betterdocs-content-wrapper .betterdocs-sidebar {
display: none;
}
body .betterdocs-wrapper .betterdocs-content-wrapper .betterdocs-content-area.docs-content-full-main {
grid-column-start: 1;
width: 100%;
}
}

You can simply add custom CSS by navigating to your WordPress Dashboard -> Appearance -> Customize.
After you are on the Customizer page, search for the “Additional CSS” option. You can then go ahead and insert CSS Code. Please check this screencast to learn more – https://d.pr/v/QrrfTw

Thanks.

Hi there,

That’s excellent. Many thanks. Much appreciated.

Hello @rpladmin ,

Sorry for the initial miscommunication. I am glad I was able to help, please feel free to contact us anytime you need help, we are always here to help. If you don’t mind me asking, could you do me a favor, and spend 30-sec to review your support experience with me following this link? This will help us to serve better. Thank you in advance! Link to review: https://www.ads-software.com/support/plugin/betterdocs/reviews/#new-post

Good day.