[FIXED] How to make an iframe responsive for mobile?

Issue

I am attempting to embed an iframe object onto a page of my wordpress website. I am able to embed the iframe, however, the object runs off of the screen on a mobile device. This is the iframe that I was given to embed

<div style="display:block;margin:0;padding:0;border:0;outline:0;font-size:10px!important;color:#AAA!important;vertical-align:baseline;background:transparent;width:1000px;">
  <iframe frameborder="0" height="1000" scrolling="no" src="https://secure.rightsignature.com/templates/7304f97a-bbbb-4dc7-b48d-6d6a5ac41b5c/template-signer-link/267cd399a88df2a2616ab109b61f7bb5" width="1000"></iframe>
</div>

I attempted wrapping the entire code above with a div class:

div class="right-signature"

and then using the following CSS I found in another forum article:

.right-signature {
    position: relative;
    padding-bottom: 50%;
    height: 0;
    overflow: hidden;
}
.right-signature iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

but I have been unsuccessful in getting it to work. Does anyone know what I can do to get this working for mobile devices?

Solution

I figured it out... I did not end up having to add any custom CSS in order to solve the problem. I simply needed to change the iframe widths from 1000px to 100%.

Answered By - Schaeffer Warnock

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)