diff --git a/content/post/2025-08-29-tutorial-primer-post.md b/content/post/2025-08-29-tutorial-primer-post.md
index d162e64..3eb8cdd 100644
--- a/content/post/2025-08-29-tutorial-primer-post.md
+++ b/content/post/2025-08-29-tutorial-primer-post.md
@@ -30,7 +30,7 @@ Luego debes agregar al inicio del archivo la metadata:
 
 ![metadata.webp]({static}/img/tutorial-primer-post/metadata.webp){: .post-img}
 
-Esta metadata es escencial para poder crear los **preview** de los post al inicio del blog.
+Esta metadata es esencial para poder crear los **preview** de los post al inicio del blog.
 
 Se debe respetar los caracteres `---` tanto al inicio como al final de la metadata y separando la metadata del contenido del post
 con un **salto de línea**:
@@ -44,11 +44,10 @@ Una vez listo con la metada puedes **agregar tu contenido** ocupando formato __m
 Dentro de tu contenido se puede agregar texto con el formato que se quiera, imágenes, código o cualquier otro elemento.
 
 **Importante**: Todo contenido con estilo **personalizado** es permitido siempre y cuando no interfiera con el estilo global del blog. 
-En este post no se cubre cómo peronsalizar el sitio entero.
 
 <br >
 
-Para agregar alguna imágen se hace con el formato `![<nombre-img>.webp](<ruta hacia imagen>.md)`:
+Para agregar alguna imágen se hace con el formato `![<nombre-img>.webp](<ruta hacia imagen>.webp)`:
 
 ![ruta-imagen.webp]({static}/img/tutorial-primer-post/ruta-imagen.webp){: .post-img}
 
@@ -60,11 +59,11 @@ Toda imagen agregada al proyecto se debe guardar en la ruta `content/img/<nombre
 
 ![carpeta-img-post.webp](../img/tutorial-primer-post/carpeta-img-post.webp){: .post-img}
 
-Si quieres agregar una imagen ocupando una URL es el mismo formato mostrado anteriormente `![<nombre imagen>](<URL de imagen>)`
+Si quieres agregar una imagen ocupando una URL, se debe usar el mismo formato mostrado anteriormente `![<nombre imagen>](<URL de imagen>)`
 
 <br >
 
-También puedes agregar código que se pueda copiar:
+También puedes agregar código que se puede copiar:
 
     ```<nombre lenguaje>
     código de ejemplo aquí
@@ -100,7 +99,7 @@ Para ocupar info panels como `warning` o `note`:
 Puedes agregar un título también:
 
 ```
-!!! note "🪐 Titulo ejemplo" 
+!!! warning "🪐 Titulo ejemplo" 
     Este es un info panel con título tipo **note**
 ```
 
@@ -126,4 +125,4 @@ tu post al blog de Python Chile.
 
 Para saber más sobre cómo contribuir al blog visita la [documentación oficial](https://github.com/python-chile/blogpythonchile?tab=contributing-ov-file#readme).
 
-### Si has llegado hasta aquí... ¡Muchas gracias por tú interés 🎉🎉!
\ No newline at end of file
+### Si has llegado hasta aquí... ¡Muchas gracias por tú interés 🎉🎉!
diff --git a/theme/static/css/style.css b/theme/static/css/style.css
index bf3317d..4efbbf6 100644
--- a/theme/static/css/style.css
+++ b/theme/static/css/style.css
@@ -7,6 +7,7 @@ body, html, root {
     background: #F5F0CD !important;
 }
 
+
 /* navbar */
 .navbar {
     display: flex;
@@ -22,7 +23,8 @@ body, html, root {
 }
 
 .navbar-left {
-    width: 90%;
+    flex: 1;
+    width: auto;
     display: flex;
     align-items: center;
     background-color: #578FCA;
@@ -480,57 +482,134 @@ iframe {
     color: #E22914;
 }
 
-@media (max-width: 1300px) {
+@media (max-width: 600px) {
+  .navbar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .navbar-left {
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .navbar-logo {
+    height: 40px;
+    margin: 0.5rem auto;
+  }
+
+  .navbar-title, .cursor {
+    font-size: 1.5rem;
+  }
 
-    .navbar-logo {
-        height: 40px;
-    }
+  .navbar-menu {
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+    padding: 0.5rem 0;
+  }
 
-    .navbar-title, .cursor {
-        font-size: 3rem;
-    }
+  .main-msg {
+    margin: 1.5rem auto;
+    padding: 0 1rem;
+  }
 
+  .search-bar-container {
+    margin: 0 1rem;
+  }
 
-    .navbar-menu {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 1rem;
-        margin: 1rem auto;
-        padding: 0;
-        width: 20%;
-    }
+  .preview-post {
+    width: 100%;
+    height: auto;
+    min-height: 320px;
+  }
+
+  .post {
+    margin: 1rem;
+    padding: 1rem;
+  }
 
-    .navbar-menu a {
-        display: block;
-        max-width: 60%;
-        text-align: center;
-        font-size: 80%;
-    }
+  iframe {
+    width: 100% !important;
+    height: 16rem !important;
+  }
 
-    .preview-tags-container {
-        display: none;
-    }
+  .contributors-container,
+  .contact-container {
+    padding-bottom: 10%;
+  }
 }
 
-@media (max-width: 920px) {
+@media (min-width: 601px) and (max-width: 900px) {
+  .navbar-title, .cursor {
+    font-size: 2rem;
+  }
 
-    .navbar-logo {
-        height: 20px;
-    }
+  .navbar-logo {
+    height: 50px;
+  }
 
-    .navbar-title, .cursor {
-        font-size: 1rem;
-    }
+  .preview-post {
+    width: 45%;
+  }
 
-    .main-body-msg {
-        font-size: 0;
-    }
+  .post {
+    margin: 1rem 5rem;
+  }
 
-    .preview-summary {
-        display: none;
-    }
+  iframe {
+    width: 90% !important;
+    height: 24rem !important;
+  }
 
-    .navbar-menu a {
-        font-size: 60%;
-    }
-}
\ No newline at end of file
+  .contributors-container,
+  .contact-container {
+    padding-bottom: 15%;
+  }
+}
+
+@media (min-width: 901px) and (max-width: 1200px) {
+  .navbar-title, .cursor {
+    font-size: 3rem;
+  }
+
+  .preview-post {
+    width: 30%;
+  }
+
+  .post {
+    margin: 1rem 8rem;
+  }
+
+  iframe {
+    width: 85% !important;
+    height: 28rem !important;
+  }
+
+  .contributors-container,
+  .contact-container {
+    padding-bottom: 20%;
+  }
+}
+
+@media (min-width: 1201px) {
+  .navbar-title, .cursor {
+    font-size: 4rem;
+  }
+
+  .preview-post {
+    width: 30%;
+  }
+
+  .post {
+    margin: 1rem 20rem;
+  }
+
+  iframe {
+    width: 80% !important;
+    height: 35rem !important;
+  }
+}