title: Google Calendar Responsiveness
body: <p>I have a WordPress site and have embedded a Google calendar on one the pages. I am using the following code to attempt to make the calendar responsive for mobile devices: </p>
  
  <pre><code>.responsive-iframe-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  }
  
  .responsive-iframe-container iframe,
  .vresponsive-iframe-container object,
  .vresponsive-iframe-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  }
  </code></pre>
  
  <p>and around the iframe I have</p>
  
  <pre><code>&lt;div class="responsive-iframe-container"&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>While I have noticed that the calendar appears shrunk and more fits on the page, on iPhone and other phones the full calendar still is not showing. I am not sure what I am missing here. Any help appreciated, thanks.</p>