diff --git a/_data/locale.toml b/_data/locale.toml
index 09e6ead..8cf6cb9 100644
--- a/_data/locale.toml
+++ b/_data/locale.toml
@@ -13,3 +13,7 @@ es = "posts recientes"
 [listening-to]
 en = "listening to..."
 es = "estoy escuchando..."
+
+[mobile-warning]
+en = "this site is NOT optimized for mobile (yet). the groundwork is laid but i have not finished the css so things will look very ugly for you. sorry!!"
+es = "aún NO optimizo el sitio para verlo en celulares o pantallas más chicas. aunque escribí el html pensando también en soportar celulares, la parte de css no está hecha así que se verá bien feo para ti. sorry!!"
diff --git a/_includes/general.scss b/_includes/general.scss
index 50e679f..be9a99f 100644
--- a/_includes/general.scss
+++ b/_includes/general.scss
@@ -1,5 +1,7 @@
 @use "main-palette.scss" as mp;
 
+$breakpoint: 768px;
+
 * {
     margin: 0;
     box-sizing: border-box;
diff --git a/_layouts/base.njk b/_layouts/base.njk
index 003c169..f36f05a 100644
--- a/_layouts/base.njk
+++ b/_layouts/base.njk
@@ -22,6 +22,10 @@ lastfm: false
                 {% include "default_navbar.njk" %}
             </div>
             
+            <div id="mobile-warning" class="warning">
+                <p>{{ "mobile-warning" | i18n }}</p>
+            </div>
+
             <div class="base-content-wrapper">
                 {{ content | safe }}
             </div>
diff --git a/css/main.scss b/css/main.scss
index 19a67d9..78eb371 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -17,6 +17,17 @@ body {
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         font-size: 0.8em;
     }
+
+    .warning {
+        padding: 2px;
+        margin: 2px auto;
+        text-align: center;
+        border-top: 1px solid c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
+        border-bottom: 1px solid c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
+        background: c.adjust($color: mp.$border, $saturation: 15%, $lightness: -20%);
+    }
+
+    @media (min-width: general.$breakpoint) { #mobile-warning { display: none; }}
 }
 
 .header-wrapper {