Skip to content

Instantly share code, notes, and snippets.

@stephanbogner

stephanbogner/example.html

Last active August 25, 2021 08:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stephanbogner/de375ef203f4e35a90a5dc682c65eeca to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stephanbogner/de375ef203f4e35a90a5dc682c65eeca to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. stephanbogner revised this gist Aug 25, 2021. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,6 @@
    <!-- Example html structure when you work with content that is larger than your screen size -->
    <!-- (e.g. an non-responsive app that runs on 4k but you are on a laptop) -->
    <!-- See comment below for screenshot -->

    <style>
    /* Extracted from tailwind.css https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.css */
  2. stephanbogner revised this gist Aug 25, 2021. No changes.
  3. stephanbogner created this gist Aug 25, 2021.
    35 changes: 35 additions & 0 deletions example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@

    <style>
    /* Extracted from tailwind.css https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.css */
    .relative { position: relative; }
    .w-screen { width: 100vw; }
    .h-screen { height: 100vh; }
    .bg-black { background-color: #000; }
    .bg-white { background-color: #fff; }
    .flex { display: flex; }
    .items-center { align-items: center; }
    .overflow-hidden { overflow: hidden; }
    .mx-auto { margin-left: auto; margin-right: auto; }
    .text-6xl { font-size: 3.75rem; line-height: 1; }
    </style>

    <style>
    /* I recommend Tailwind.css or a reset.css like https://meyerweb.com/eric/tools/css/reset/ to get rid of weird margins/paddings */
    body{ padding: 0; margin: 0; }
    /* Custom to use with tailwind properly better adjust the tailwind.config.js */
    .min-w-4k { min-width: 3840px; }
    .min-h-4k { min-height: 2160px; }
    .w-4k{ width: 3840px; }
    .h-4k{ height: 2160px; }

    .min-w-fullHD { min-width: 1920px; }
    .min-h-fullHD { min-height: 1080px; }
    .w-fullHD { width: 1920px; }
    .h-fullHD { height: 1080px; }
    </style>

    <div class="relative w-screen h-screen min-w-4k min-h-4k bg-black flex items-center overflow-hidden">
    <div id="content-container" class="relative w-4k h-4k mx-auto bg-white overflow-hidden">
    <span class="text-6xl">I am a view that has the size of 4K (you might have to zoom out)</span>
    </div>
    </div>