Help Make Opt-In Boxes Responsive

On my blog i have custom-styled the opt-in boxes above and below each post:

http://bit.ly/1jO3Zeu

Here the CSS I’m using for the top opt-in:

/** Post CTA TOP CSS*/

#af-form-1361379307 { margin-top: 30px;

max-width: 930px;

width: 85%;

overflow: hidden;

-webkit-border-radius: 10px 10px 10px 10px;

border-radius: 10px 10px 10px 10px; }

#af-form-1361379307 .af-body input.text {

border: 1px solid #619BD1;

margin-top: .65em; position:relative;

left:-130px; width: 190px;

height: 25px; -webkit-border-radius: 10px 10px 10px 10px;

border-radius: 4px 4px 4px 4px; }

#af-form-1361379307 .af-element { padding: 0px 0px 10px 0px;

width: 400px;

float: left; }

#af-form-1361379307 .af-clear { display:none; }

#af-form-1361379307 .buttonContainer {

margin-top:-42px !important;

float: right; margin-right:15px!important }

#af-form-1361379307 .buttonContainer input.submit {

-webkit-border-radius: 5px 5px 5px 5px;

border-radius: 5px 5px 5px 5px;

max-width: 220px; }

AND HERE’S THE CSS for the Bottom CTA:

/** Post Bottom CTA */

#af-form-1688659877{ margin: 0 auto;

max-width: 574px;

overflow: hidden;

-webkit-border-radius: 10px 10px 10px 10px;

border-radius: 10px 10px 10px 10px; }

#af-form-1688659877 .af-body input.text {

float: left;

width: 200px;

height: 25px; -webkit-border-radius: 10px 10px 10px 10px;

border-radius: 4px 4px 4px 4px; }

#af-form-1688659877 .buttonContainer { margin-top:-41px!important;

float: right; margin-right: 75px; }

#af-form-1688659877 .buttonContainer input.submit { -webkit-border-radius: 5px 5px 5px 5px;

border-radius: 5px 5px 5px 5px; }

.after-post {

margin: 25px 0px 30px 0px;

background: #FFFFFF;}

WOULD REALLY appreciate some help making these two form display better on mobile.

Thanks so much!