diff --git a/src/layouts/all.scss b/src/layouts/all.scss
index 367e74e..5c91cc2 100644
--- a/src/layouts/all.scss
+++ b/src/layouts/all.scss
@@ -59,3 +59,11 @@ body {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
 }
+
+//////  BULMA MOBILE BREAKPOINT ///////
+@media all and (max-width:768px){
+  .content.has-custom-font-size-on-mobile{
+    font-size: 0.875rem
+  }
+}
+//////  BULMA MOBILE BREAKPOINT ///////
\ No newline at end of file
diff --git a/src/pages/blog.js b/src/pages/blog.js
index 273e45d..a55788d 100644
--- a/src/pages/blog.js
+++ b/src/pages/blog.js
@@ -17,8 +17,8 @@ export default class BlogPage extends React.Component {
         {posts.map(({ node: post }) => (
           <Link className="post is-block" to={post.fields.slug} key={post.id}>
             <section className="section is-rounded has-background-white has-shadow has-shadow-hovered">
-              <div className="content">
-                <h2 className="is-size-4 has-text-black has-text-weight-bold">
+              <div className="content  has-custom-font-size-on-mobile">
+                <h2 className="has-text-black has-text-weight-bold">
                   {post.frontmatter.title}
                 </h2>
                 <p>{post.excerpt}</p>
diff --git a/src/pages/index.js b/src/pages/index.js
index e634b0b..4956e8b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -29,13 +29,13 @@ const IndexPage = props => {
         <html lang="es" />
       </Helmet>
       <section className="section has-text-centered">
-        <h1 className="title is-1 has-text-black has-text-weight-bold">
+        <h1 className="title is-1 is-size-3-mobile has-text-black has-text-weight-bold">
           Comunidad de JavaScript <br /> en El Salvador
         </h1>
         <ExternalLink
           eventLabel="Link registro"
           to="https://www.meetup.com/es-ES/horchatajs/"
-          className="button is-primary is-large has-text-black"
+          className="button is-primary is-large is-size-5-mobile has-text-black"
           target="_blank"
           rel="noopener noreferrer"
         >
diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
index 3340300..dcef2d1 100644
--- a/src/templates/blog-post.js
+++ b/src/templates/blog-post.js
@@ -4,7 +4,6 @@ import { kebabCase } from 'lodash';
 import Helmet from 'react-helmet';
 import Link from 'gatsby-link';
 import Content, { HTMLContent } from '../components/Content';
-
 export const BlogPostTemplate = ({
   content,
   contentComponent,
@@ -13,7 +12,6 @@ export const BlogPostTemplate = ({
   date,
 }) => {
   const PostContent = contentComponent || Content;
-
   return (
     <div className="container is-content">
       <Helmet>
@@ -21,8 +19,8 @@ export const BlogPostTemplate = ({
         <body className="has-background-white" />
       </Helmet>
       <section className="section">
-        <div className="content">
-          <h1 className="is-size-3 has-text-black has-text-weight-bold">
+        <div className="content has-custom-font-size-on-mobile">
+          <h1 className="has-text-black has-text-weight-bold">
             {title}
           </h1>
           <p className="has-text-black">
diff --git a/yarn.lock b/yarn.lock
index b1b96af..19b2520 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1868,6 +1868,7 @@ cheerio@^0.22.0:
 cheerio@^1.0.0-rc.2:
   version "1.0.0-rc.2"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
+  integrity sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=
   dependencies:
     css-select "~1.2.0"
     dom-serializer "~0.1.0"
