Mautic Community Forums

Responsive form

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

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

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

Do you know which mautic templates are responsive?

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

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