Make tablet view look like mobile

Hello @invorio7266

Make tablet view look like mobile. How do I achieve this?

→ I believe that mostly depends on your current theme or page builder (*if any), which is not a part of the weDocs plugin. However, did you try with another theme like Twenty Twenty or Astra to judge the output?

If your page is publicly accessible, you can share the page URL, which will help you get some suggestions to improve from others.

Thanks.

Thanks @aurangajeb

I previously had a problem with sidebar format and ended up changing the theme to Neve to solve this. The issue is I can’t get to edit the layout which dictates say font sizes, column width, column order for each display (desktop, tablet, mobile). Even just changing the column order in tablet view would be helpful.

See the page here:
https://prospectsafari.com/docs/user-guide/tutorials/browse-prospects-2/

You can see the issue if you reduce the width to “tablet” – the tutorial text is buried under all the dosc articles list. I’d prefer them the other way around (text first, list below) or even without the articles list. If you keep reducing to “mobile” you get the effect I’d like to see.

In general, the tutorial / help window opens to the left side side of the app window and will therefore be narrow, so even on a desktop the “tablet” width will be commonly used.

Any suggestions?

Hey @invorio7266
Sorry for the delay!

You can try this CSS snippet on your customize → additional CSS area which should display the output as you want.

@media screen and (max-width: 768px) {
  .wedocs-hide-mobile {
    display: none;
  }
  .wedocs-single-wrap .wedocs-single-content footer.entry-footer.wedocs-entry-footer time {
    float: none;
  }
  .wedocs-shortcode-wrap ul.wedocs-docs-list.col-3 > li,
  .wedocs-shortcode-wrap ul.wedocs-docs-list.col-2 > li {
    width: 100%;
    float: none;
    margin-right: 0;
  }
}