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!

  • Patrick
    • Support Monkey

    Hiya @david

    Now you're getting much closer with those boxes than you were before. :slight_smile:

    Tell you what, I'll take a closer look at your page a little later on today. Then I'll post again with suggested modifications to your CSS. I can't really do it right at this moment as I do need to respond to other threads too.

    I'll post back here when I have something to propose.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.