responsive design is a nightmare (and how i fixed it in quartz/obsidian)

anyone who visits my site from pc (ultrawide monitor, linux, terminal open) sees everything beautiful. quartz v4 does an amazing job generating the static site straight from my obsidian vault.

but then i decided to open the site on mobile... and my eyes started bleeding.

the chaos

basically the layout was completely broken on mobile (iphone and android).

1. youtube videos: i was using iframes with fixed size (width="700"), so the video overflowed the screen and created infinite horizontal scroll.
2. tables: cut in half. couldnt read the right columns at all.
3. images: some got gigantic and pushed the text into the void.

since quartz css is auto-generated on build (and i was too lazy to mess with global sass and wait for github actions deploy), i went for the most roots solution possible: inject css straight into the markdown.

the fix (the so-called "technical duct tape")

quartz accepts html tags inside .md. so if u put a <style> block right after the frontmatter (those configs at the top), it applies the style only to that page.

thats how i tamed the beast:

videos and images behaving

to stop the video from exploding, we use aspect-ratio: 16/9. this makes it calculate the height by itself based on screen width. pure magic.

iframe, video {
    max-width: 100%;
    width: 100% !important; /* brute force to obey */
    height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: 8px; /* so it looks cute */
}

img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

the final boss: tables

tables in html are annoying. by default they dont accept scroll. if a table is wide, it stretches the whole site. the trick was transforming the table into a block (display: block) to unlock horizontal scroll (overflow-x: auto).

table {
    display: block !important; /* the cat's jump */
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap; /* optional, so it doesnt break lines inside cells */
}

the final code (copy & paste)

if u use quartz or obsidian and ur suffering with this, paste this at the top of ur file (after the ---):

<style>
  /*  SUPER MOBILE ANTI-BREAK SHIELD v3.0 */

  /* 1. Media (Videos and Images) */
  iframe, video {
    max-width: 100%;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }

  /* 2. Tables with Scroll */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* 3. Code and Long Blocks */
  pre, code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    max-width: 100%;
    overflow-x: auto !important;
  }

  /* 4. Callouts */
  .callout, blockquote {
    max-width: 100%;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }
</style>

frontend is my passion (not).