Forums

Mail Chimp & Form Width

Permalink
HI all,

Not sure who may also have come across this one but could use a hand.

I have a website that is responsive. The site also has the mailchimp add on so that customers can sign up to the distribution list.

The sign up form looks great on the normal view & also on the smaller iPhone & Android smart phone sized view, but when it is tablet size then the form looks off. See attached screenshot.

I have looked everywhere for the setting that will allow me to make the input fields auto width to fit the area they are placed in but to no avail. Can anyone offer any help?

1 Attachment

garyjhills
 
mhawke replied on at Permalink Reply
mhawke
The widths are hard-coded in pixels into the form so you could try to change the widths of those elements to percentages by editing the following lines of the view.php file found at line 27 "[root]/packages/mail_monkey/blocks/monkey_block/templates/compact/view.php"

Existing...
<?php  echo $fm->text('fullname',$fullname,array('size'=>'30'))?><br/>
<?php  echo t('Email')?><br/>
<?php  echo $fm->text('email',$email,array('size'=>'30'))?>


Change to...
<?php  echo $fm->text('fullname',$fullname,array('size'=>'100%'))?><br/>
<?php  echo t('Email')?><br/>
<?php  echo $fm->text('email',$email,array('size'=>'100%'))?>


Hope that helps.
garyjhills replied on at Permalink Reply
garyjhills
Thanks for replying. I tried this and unfortunately it doesn't work. It makes the text entry areas stretch all the way across the page to the right for some reason.

If I set the value to 15 they display within the border area but then look very small when they are moved on the smaller screen.

Shall keep looking at this to see what else can be done.
enlil replied on at Permalink Best Answer Reply
enlil
You may want to try adding max-width in addition to the 100%, forcing it to be 100% up to a certain pixel width! I'm not at my desk and can't test this at the moment but I believe it should work!
mhawke replied on at Permalink Reply 1 Attachment
mhawke
Following enlil's suggestion, I was able to have some success with this code at line 27:

<?php  echo $fm->text('fullname',$fullname,array('style'=>'width:95%;max-width:95%'))?><br/>
<?php  echo t('Email')?><br/>
<?php  echo $fm->text('email',$email,array('style'=>'width:95%;max-width:95%'))?>
enlil replied on at Permalink Reply
enlil
guess i dont need to test it now that im home. Thanks Mike!!
garyjhills replied on at Permalink Reply
garyjhills
Thanks guys -- works perfectly. Not sure which one of you to mark as the Best answer - should be able to do it to both but guess enlil was the one that suggested the max-width addition even if you provided the code. Thanks very much again.