title: Unable to make html file responsive on mobile device
body: <p>I'm using bootstrap 4 to build a website. When using google chrome's device toggle toolbar, my website's homepage isn't able to display the screen properly on any of the handheld devices; I need to scroll to see all three posters. But If I click onto movie1, all the content is displayed perfectly(no scrolling needed). Both the files use the same css file.</p>
  <p>I've made sure to include this code in both the html files:</p>
  <pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  </code></pre>
  <p>and this into the css file:</p>
  <pre><code>@media (min-width: 768px) and (max-width: 992px){
  }
  @media (min-width: 480px) and (max-width: 767px) {
       
  }
  </code></pre>
  <p>This is the code for the head of the homepage:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0&quot;&gt;
  
          &lt;link rel=&quot;icon&quot; href=&quot;movie-symbol-of-video-camera_icon-icons.com_72981.png&quot;&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
          &lt;title&gt;indextest&lt;/title&gt;
          &lt;style&gt;
              
          &lt;/style&gt;
      &lt;/head&gt;
  </code></pre>
  <p>This is the code for the head of the movie1 html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  
      &lt;!-- &lt;link rel=&quot;icon&quot; href=&quot;../static/images/movie-symbol-of-video-camera_icon-icons.com_72981.png&quot;&gt;--&gt;
      &lt;link rel=&quot;icon&quot; href=&quot;movie-symbol-of-video-camera_icon-icons.com_72981.png&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  </code></pre>
  <p>Not sure why one page is working and the other isn't. Any ideas on how to fix this?</p>
  <p>Fig below: Content not displayed properly; need to scroll to see rest of the page
  <a href="https://i.stack.imgur.com/FS9No.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FS9No.png" alt="enter image description here" /></a></p>
  <p>Fig below: content fits perfectly; no scrolling needed
  <a href="https://i.stack.imgur.com/0RWu3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0RWu3.png" alt="enter image description here" /></a></p>