title: Gif breaking the responsiveness of Gatsby site
body: <ul>
  <li><h3>Problem Summary</h3>
  </li>
  </ul>
  <p>There are two .gif images in my blog post, which are breaking the responsiveness of my site, they don't seem to get resized when opened on a mobile device. Although they seem to be fine when opened from pc.</p>
  <p><strong>PC view:</strong></p>
  <p><img src="https://user-images.githubusercontent.com/26279642/107677081-0c426600-6cc4-11eb-91ef-29564b1b03fa.png" alt="image" /></p>
  <p><strong>Mobile view:</strong></p>
  <p><img src="https://user-images.githubusercontent.com/26279642/107677342-59bed300-6cc4-11eb-89c8-421e5c0d2767.png" alt="image" /></p>
  <p><strong>As you can see, in mobile view the two .gif images are still the same size, which breaks the responsiveness of the page. Is there a way I could solve this issue?</strong></p>
  <p><br><br></p>
  <ul>
  <li><p>The syntax I've used to include the .gif in my .mdx file is-</p>
  <p><code>![otter dancing with a fish](./neural_net_data_manupulation_2.gif)</code></p>
  </li>
  <li><h3>Config.js file of my site:</h3>
  </li>
  </ul>
  <pre><code>require(`dotenv`).config({
    path: `.env`,
  })
  
  
  const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
  
  module.exports = {
    siteMetadata: {
      siteTitle: `Khalid Saifullah`,
      siteTitleAlt: `Khalid Saifullah - Blog`,
      author: `@k_saifullaah`,
      siteImage: `/my_banner.jpg`,
      siteHeadline: `Khalid Saifullah - Blog`,
      siteUrl: `https://khalidsaifullaah.github.io`,
      siteDescription: `I'm Khalid - a CS undergrad student. I take great interest in Deep Learning research, visualizations, and photography.`,
    },
    plugins: [
      // `gatsby-remark-mathjax`,
      {
        resolve: `@lekoarts/gatsby-theme-minimal-blog`,
        // See the theme's README for all available options
        options: {
          mdx: false,
          feedTitle: `Khalid Saifullah - Blog`,
          navigation: [
            {
              title: `Blog`,
              slug: `/blog`,
            },
            {
              title: `About`,
              slug: `/about`,
            },
            {
              title: `Portfolio`,
              slug: `/portfolio`,
            },
          ],
          externalLinks: [
            {
              name: `Github`,
              url: `https://github.com/khalidsaifullaah`,
            },
            {
              name: `Twitter`,
              url: `https://twitter.com/k_saifullaah`,
            },
            {
              name: `Facebook`,
              url: `https://www.facebook.com/ikhalidsaifullaah/`,
            },
          ],
        },
      },
      {
              resolve: `gatsby-plugin-mdx`,
              options: {
          gatsbyRemarkPlugins: [
            `gatsby-remark-copy-linked-files`, 
            { 
              resolve: `gatsby-remark-images`, 
              options: { 
                linkImagesToOriginal: false, 
              }, 
            },
          ],
                  remarkPlugins: [ require('remark-math'), require('remark-html-katex') ]
              }
          },
      
      {
        resolve: `gatsby-transformer-remark`,
        options: {
          plugins: [`gatsby-remark-copy-linked-files`],
        },
      },
      {
        resolve: `gatsby-plugin-google-analytics`,
        options: {
          trackingId: process.env.GOOGLE_ANALYTICS_ID,
        },
      },
      `gatsby-plugin-sitemap`,
      {
        resolve: `gatsby-plugin-manifest`,
        options: {
          name: `Khalid Saifullah - Blog`,
          short_name: `minimal-blog`,
          description: `I'm Khalid - a CS undergrad student at United International University. I take great interest in Deep Learning research, visualizations, and photography. Another aspect of me is that I'm a cinephile`,
          start_url: `/`,
          background_color: `#fff`,
          theme_color: `#6B46C1`,
          display: `standalone`,
          icons: [
            {
              src: `/android-chrome-192x192.png`,
              sizes: `192x192`,
              type: `image/png`,
            },
            {
              src: `/android-chrome-512x512.png`,
              sizes: `512x512`,
              type: `image/png`,
            },
          ],
        },
      },
      `remark-math`,
      `remark-html-katex`,
      `gatsby-plugin-offline`,
      `gatsby-plugin-netlify`,
      shouldAnalyseBundle &amp;&amp; {
        resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
        options: {
          analyzerMode: `static`,
          reportFilename: `_bundle.html`,
          openAnalyzer: false,
        },
      },
    ].filter(Boolean),
  }
  </code></pre>
  <p><em>You can check out the live version of the post <a href="https://khalidsaifullaah.github.io/neural-networks-from-linear-algebraic-perspective" rel="nofollow noreferrer">here</a></em></p>