TOC won't show on small screen

[liblaf]

Checklist

• [x] I have read the contributing guidelines.
• [x] There is no similar request on existing issues (including closed ones).
• [x] I have read the project progress and know the current progress of the project.
• [x] I was in the master branch of the latest code.

Is your feature request related to a problem? Please describe

TOC won't show on small screens like iPad and mobile phones. This may be designed on purpose. However, I think iPad is large enough to display an extra column of TOC.

Describe the solution you'd like

I'm not familiar with frontend, just a little bit modification on *.css conditions would do?

Describe alternatives you've considered

Collapsing the left sidebar on small screens may also be a good choice.

Additional context

[SilentGlasses]

I may be wrong but I think this will help you out, adjust these media options to what you need:

https://github.com/cotes2020/jekyll-theme-chirpy/blob/ad137fa2945b1870b9c1dd5e9212a5f4af7c3580/_sass/layout/home.scss#L119

[lnfel]

I would strongly advise against changing Chirpy's actual source code. We can extend the layout page instead by doing the following:

1. Create a _layouts directory in the root of project folder, should be similar to:

your-folder/_layouts

2. The TOC is part of Chirpy's own _layouts/page.html template. Copy the file over to your own project under your-project/_layouts/page.html.
3. After copying page.html, find the following lines:

  <!-- core -->
  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-4">

and

  <!-- pannel -->
  <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted">

4. All you have to do is change them into:

  <!-- core -->
  <div id="core-wrapper" class="col-12 col-md-9 pr-xl-4">

and

  <!-- pannel -->
  <div id="panel-wrapper" class="col-md-3 pl-2 text-muted">

5. The result would be like this:

Context

Chirpy uses Bootstrap CSS Framework under the hood. The Grid can be controlled according to current device screen width, namely sm for small screens md for medium sized devices then lg and xl for large and extra large screens respectively. A grid consists of 12 columns and the core-wrapper div starts with col-12 on the lowest screen width possible. We then set the core-wrapper to col-md-9 (become 9 columns on at least medium sized screen and above) and panel-wrapper to col-md-3 (3 columns starting from medium screens and above). More about responsive grids on the official docs.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.