Last active
August 25, 2021 08:54
-
-
Save stephanbogner/de375ef203f4e35a90a5dc682c65eeca to your computer and use it in GitHub Desktop.
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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 */ | |
.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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
That's how it looks like on a 13 inch laptop on a zoomed out Chrome