CSS is not quite so responsive anymore

[orbeckst]

With all the on-the-fly CSS hacking and JS inserting, the layout has suffered, in particular it does not scale nicely anymore on mobile devices or when you narrow the browser window. For instance,

• the menu gets cut off
• the main content does not fluidly scale and a scroll bar appears (in my browser)

If you compare to the original http://hyde.getpoole.com/ , which scales effortlessly, you see what I mean (and miss).

[orbeckst]

Maybe including the CSS for Algolia Search #73 changed something?

https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.css

The following lines look suspicious because they change some behavior based on the the width – it looks as if only algolia classes are affected but what do I know (someone with some actual CSS experience should chip in...)

@media all and (min-width: 768px) {
  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
    display: block;
  }
}

@media all and (max-width: 768px) {
  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
    display: inline-block;
    width: auto;
    text-align: left;
    float: left;
    padding: 0;
    color: #02060C;
    font-size: 0.9em;
    font-weight: bold;
    text-align: left;
    padding: 0;
    opacity: 0.5;
  }
  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:before {
    display: none;
  }
  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:after {
    content: "|";
  }
  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content {
    display: inline-block;
    width: auto;
    text-align: left;
    float: left;
    padding: 0;
  }
  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content:before {
    display: none;
  }
}

[orbeckst]

We also have a local.css but I don't think that anything in there is responsible.

[orbeckst]

TODO: remove CSS selectively and check who the culprit is ("divide et impera")

• comment out local.css
• comment out algolia search stuff

[orbeckst]

... and Google sent me an email telling me that our website is not responsive anymore and we should fix that.

[orbeckst]

The current local.css is the culprit, namely the CSS for flexible YouTube video containers.