Responsive form

Product Support
1

Hi



I have a form, defined as min-height 300px, height 100% and does not appear well in mobile (i am using an iphone).

Please check it out here: http://mka.smartlaunch.pt/fuckup-nights-sign-up



The code is

Code:
{pagetitle} 
			<table cellpadding="0" cellspacing="0" data-section="" min-width="300" style="border-collapse: collapse !important;" class="w320">
				<tbody>
					<tr style="-webkit-user-select: none;">
						<td data-slot-container="" style="font-family: Helvetica, Arial, sans-serif;font-size: 32px;color: #4d4d4d;text-align: center;line-height: normal;border-collapse: collapse;font-weight: 700;padding: 35px 0 0;" class="header-lg">
							<div data-param-padding-top="30" data-slot="text" style="padding-top: 30px;"><img src="http://mka.smartlaunch.pt/images//c779b0d0446a33a94b4065201f97a607.png" style="width: 203px; height: 85.9367px;" data-allydeemaillimits="[object Object]" class="fr-dib fr-draggable" width="203" height="86">
								<br>
							</div>
						</td>
					</tr>
					<tr style="-webkit-user-select: none;">
						<td style="font-family: Helvetica, Arial, sans-serif;font-size: 14px;color: #777777;text-align: center;line-height: 21px;border-collapse: collapse;padding: 30px 50px;min-width: 300px;" class="mini-block-container">

							<table cellpadding="0" cellspacing="0" style="border-collapse:separate !important;" width="100%">
								<tbody>
									<tr style="-webkit-user-select: none;">
										<td data-slot-container="" style="font-family: Helvetica, Arial, sans-serif;font-size: 14px;color: #777777;text-align: center;line-height: 21px;border-collapse: collapse;background-color: #ffffff;min-width: 300px;border: 1px solid #cccccc;border-radius: 5px;padding: 45px 75px;" class="mini-block"><span style="color: rgb(68, 68, 68); font-family: Titillium, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); display: inline !important; float: none;">%7Bform=3%7D</span>
											<br>
										</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
					<tr style="-webkit-user-select: none;">
						<td style="font-family: Helvetica, Arial, sans-serif;font-size: 12px;color: #333;text-align: center;line-height: 21px;border-collapse: collapse;padding: 30px 50px;min-width: 300px;" class="mini-block-container"><a href="https://smartlaunch.pt/event/fuckup-nights" style="color: rgb(255, 111, 111); font-weight: bold;">Back to Smart Launch</a></td>
					</tr>
				</tbody>
			</table>
		</center>
	</div>
</body>

Can someone give me a hand?
Thanks
Sofia
2

Hi

I have a form, defined as min-height 300px, height 100% and does not appear well in mobile (i am using an iphone).
Please check it out here: http://mka.smartlaunch.pt/fuckup-nights-sign-up

The code is

[code]

{pagetitle} 
			<table cellpadding="0" cellspacing="0" data-section="" min-width="300" style="border-collapse: collapse !important;" class="w320">
				<tbody>
					<tr style="-webkit-user-select: none;">
						<td data-slot-container="" style="font-family: Helvetica, Arial, sans-serif;font-size: 32px;color: #4d4d4d;text-align: center;line-height: normal;border-collapse: collapse;font-weight: 700;padding: 35px 0 0;" class="header-lg">
							<div data-param-padding-top="30" data-slot="text" style="padding-top: 30px;"><img src="http://mka.smartlaunch.pt/images//c779b0d0446a33a94b4065201f97a607.png" style="width: 203px; height: 85.9367px;" data-allydeemaillimits="[object Object]" class="fr-dib fr-draggable" width="203" height="86">
								<br>
							</div>
						</td>
					</tr>
					<tr style="-webkit-user-select: none;">
						<td style="font-family: Helvetica, Arial, sans-serif;font-size: 14px;color: #777777;text-align: center;line-height: 21px;border-collapse: collapse;padding: 30px 50px;min-width: 300px;" class="mini-block-container">

							<table cellpadding="0" cellspacing="0" style="border-collapse:separate !important;" width="100%">
								<tbody>
									<tr style="-webkit-user-select: none;">
										<td data-slot-container="" style="font-family: Helvetica, Arial, sans-serif;font-size: 14px;color: #777777;text-align: center;line-height: 21px;border-collapse: collapse;background-color: #ffffff;min-width: 300px;border: 1px solid #cccccc;border-radius: 5px;padding: 45px 75px;" class="mini-block"><span style="color: rgb(68, 68, 68); font-family: Titillium, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); display: inline !important; float: none;">%7Bform=3%7D</span>
											<br>
										</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
					<tr style="-webkit-user-select: none;">
						<td style="font-family: Helvetica, Arial, sans-serif;font-size: 12px;color: #333;text-align: center;line-height: 21px;border-collapse: collapse;padding: 30px 50px;min-width: 300px;" class="mini-block-container"><a href="https://smartlaunch.pt/event/fuckup-nights" style="color: rgb(255, 111, 111); font-weight: bold;">Back to Smart Launch</a></td>
					</tr>
				</tbody>
			</table>
		</center>
	</div>
</body>
[/code]

Can someone give me a hand?
Thanks
Sofia

3

The template is the one that has to be responsive Not the form.

4

Do you know which mautic templates are responsive?

5

I’m not sure since I’m using my own templates for the landing pages.

6

but try a couple of templates to find one the works for you.