Help Making Aweber form Responsive

[nubloggie]

I customized an Aweber form for my site, but can't seem to get it to resize for mobile devices...?

http://livingaha.com/4-big-life-ideas-that-everyone-needs-to-know/

Just under my Header graphic you can see the optin form "enter your email..."

here is the CSS i used to style it (it's pretty messy...sorry. i'm very new to CSS/HTML.)

#af-form-1361379307 { 	margin:  px  px 10px 0px;
 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: .50em; 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	 }	

#af-form-1361379307 .buttonContainer input.submit {		
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	max-width: 220px; } 

Any suggestions are greatly appreciated.

http://#af-form-1361379307 { margin: px px 10px 0px; 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: .50em; 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 } #af-form-1361379307 .buttonContainer input.submit { -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; max-width: 220px; }

[AnitaC]

Is the aweber form an iFrame?

---

Need help with customization or troubleshooting? Reach out to me.

[nubloggie]

Thanks for the reply. Unfortunately,m I don't know what an iframe is, or how to tell if my form is using one...

I am using a javascript snippet to access the form, but I could also use their html code instead.

What do I need to do to get you the correct info? Appreciate your help. Thanks.

[nubloggie]

Got it! I switched to using the Aweber HTML code, instead of the javascript and saw they had "width=930px" instead of "max-width".

Thanks for responding anitac!

[Author]

Posts