CMS Development

josephmanalil
Participante

unresponsive custom coded landing page

resolver

Hi 

 

Been trying to custom code this landing page on Hubspot. added media queries in the code and it dissappears and the page is not responsive.  Also tried adding a style sheet to the module, still doesnt appear responsive.

layed out the code below. ANy help will be higly valued.

---------------------------------

<table align="center" border="0" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #fff; padding: 0 27px; background: #ffffff;" width="614" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" bgcolor="#FCF9F9">
<table border="0" width="1800" style="height: 3504px;" cellpadding="0" cellspacing="1">
<tbody>
<tr style="height: 2814px;">
<td style="background: #ffffff; padding: 0px; color: #050000; font-size: 16px; font-style: normal; font-weight: normal; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; height: 2814px; width: 1792px;" align="center" bgcolor="#FFFFFF" valign="top">
<table width="559" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="1700" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" bgcolor="#0645D8" valign="middle">
<p style="font-size: 24px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 24px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 24px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;"><img src="https://mcusercontent.com/59a7f33db8efd3e35c3034f42/images/8a69e468-6cf8-4e65-8564-606d07208e60.png" width="113" height="28" alt=""> <br><br><br><a href="https://calendly.com/zenil-iqbal" style="text-decoration: none; font-size: xx-large;"> <br><br><span style="font-size: 46px; color: #f4f4f5;">*</span> <span style="font-size: 46px; color: #f4f4f5;">*</span><span style="font-size: 46px; color: #f4f4f5;">*</span><span style="font-size: 46px; color: #f4f4f5;">*</span><span style="font-size: 46px; color: #f4f4f5;">*</span></a></p>
<p style="font-size: 24px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;"><a href="https://calendly.com/zenil-iqbal" style="text-decoration: none;"> <br><br></a></p>
<p style="font-size: 40px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 40px; line-height: 20px; color: #fff; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">More skills<br>______<br><br>More employability<br>_________<br><br>More opportunities<br><br><br><span style="font-size: 14px;">with Second year Interlinked<br>Career pathway program </span></p>
<p style="font-size: 24px; line-height: 20px; color: #fff; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 24px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 24px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 24px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 20px; line-height: 20px; color: #000815; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-size: 24px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 34px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;"><span style="font-size: 14px;"><a href="https://calendly.com/zenil-iqbal" style="font-size: 36px; color: #0334ed;"></a> <br><br><span class="iconify"></span> <span style="font-size: 24px; color: #020000;"><span style="font-size: 18px;">What is the advantage &nbsp;of doing a<br></span>SECOND YEAR<br><span style="font-size: 18px;">Career Pathway Program ? <br></span></span></span> <br><br><br><br></p>
<p style="font-size: 34px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 34px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;"><a href="https://calendly.com/zenil-iqbal" style="font-size: 36px; color: #0334ed;">★★★★★</a></p>
<p style="font-size: 34px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 34px; line-height: 20px; color: #0146bd; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;"><span class="wo">With a 2 year program you can get <br><br>an extended stay option<br><br></span> <br><span style="color: #0046bd;"><a href="https://calendly.com/zenil-iqbal"></a></span></p>
<p>With extensive changes to the culture of work and social <br>engagement, globally, the idea of extending your studies is advantageous. From acquiring employability skills to obtaining <br>technical tools to stay relevant in the job market. The program is devised to acquire additional technical skills to be <br>employable and be competitive in the market.</p>
<p><span style="font-size: 16px;">For instance if you have a background in Java you will be able to expand your employability by doing an <br>A.E.C in Big Data, because Big Data developer needs programming expertise using Java</span>.<br><br></p>
<table width="757" border="0" align="center" style="width: 560px;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="245" bgcolor="#0334ED" style="text-align: center; color: #f5ebec; font-weight: bold; width: 245px;"><br>First <br>Program<br><br></td>
<td width="220" bgcolor="#0334ED" style="text-align: center; color: #f4f0f0; font-weight: bold; width: 220px;">Desired outcome</td>
<td width="292" bgcolor="#0334ED" style="text-align: center; color: #f9efef; font-style: normal; font-weight: bold; width: 293px;">Which <br>program<br>to do</td>
</tr>
<tr>
<td style="text-align: center; width: 245px;"><br>Java Development<br><br></td>
<td style="text-align: center; width: 220px;" bgcolor="#95AFF7">Get into Data Science</td>
<td style="text-align: center; width: 293px;">Big Data <br>Developer</td>
</tr>
<tr bgcolor="#CED1D7">
<td style="width: 245px;" align="center" bgcolor="#E0E8F8"><br>Software Testing<br><br></td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">SAP Quality System <br>Analyst</td>
<td style="width: 293px;" align="center" bgcolor="#E0E8F8">SAP Supply Chain Management</td>
</tr>
<tr>
<td style="width: 245px;" align="center"><br>Business Intelligence Developer<br><br></td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">System Analyst</td>
<td style="width: 293px;" align="center">Business Analyst IT</td>
</tr>
<tr bgcolor="#CED1D7">
<td style="width: 245px;" align="center" bgcolor="#E0E8F8"><br>Digital Marketing &amp; Web<br><br></td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">Business Analyst<br>Marketing</td>
<td style="width: 293px;" align="center" bgcolor="#E0E8F8">Business Analyst IT</td>
</tr>
<tr>
<td style="width: 245px;" align="center"><br>Networking &amp; Technical Support<br><br></td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">Technical Manager</td>
<td style="width: 293px;" align="center">Business Analyst IT</td>
</tr>
<tr bgcolor="#CED1D7">
<td style="width: 245px;" align="center" bgcolor="#E0E8F8"><br>Supply Chain Manager<br><br></td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">Business Analyst</td>
<td style="width: 293px;" align="center" bgcolor="#E0E8F8">Business Intelligence &amp; <br>Visualization Analyst</td>
</tr>
<tr>
<td style="width: 245px;" align="center"><br>Business Analyst IT<br><br></td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">ELT Tester</td>
<td style="width: 293px;" align="center">Business Intelligence &amp; <br>Visualization Analyst</td>
</tr>
<tr bgcolor="#CED1D7">
<td style="width: 245px;" align="center" bgcolor="#E0E8F8"><br>Big Data Developer<br><br></td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">Data Analyst</td>
<td style="width: 293px;" align="center" bgcolor="#E0E8F8">Software <br>Testing</td>
</tr>
<tr bgcolor="#CED1D7">
<td style="width: 245px;" align="center" bgcolor="#F9FAFC"><br>Big Data Developer<br><br></td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">Data Analyst</td>
<td style="width: 293px;" align="center" bgcolor="#FFFFFF">Software <br>Testing</td>
</tr>
<tr bgcolor="#CED1D7">
<td style="width: 245px;" align="center" bgcolor="#E0E8F8"><br>Java Developer<br><br></td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">Techno Functional Analyst</td>
<td style="width: 293px;" align="center" bgcolor="#E0E8F8">Business Analyst</td>
</tr>
<tr>
<td style="width: 245px;" align="center">Java Developer<br><br></td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7"><br>Java Enterprise <br>Software Tester<br><br></td>
<td style="width: 293px;" align="center">Software Testing</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p style="font-size: 16px; line-height: 20px; color: #000006; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: lighter;">&nbsp;</p>
<p style="font-size: 16px; line-height: 20px; color: #000006; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: lighter;">&nbsp;</p>
<p style="font-size: 16px; line-height: 20px; color: #fb0624; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: lighter;"><span style="color: #04369b; font-size: 24px;"><strong>To know more </strong></span></p>
<p style="font-size: 16px; line-height: 20px; color: #fb0624; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: lighter;"><span style="font-size: 16px; color: #0a0a0a;"> <br></span></p>
<table width="200" border="0" align="center" style="width: 269px; height: 104px;" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 104px;">
<td style="width: 261px; height: 104px;" align="center" bgcolor="#092BFC" valign="middle"><br><a href="https://outlook.office365.com/owa/calendar/InternationalStudentAdvising@montrealcollege.ca/bookings/" style="color: #f0f0f0;"> <br><span style="font-size: 14px;">Talk to us</span> <br></a> <br><br></td>
</tr>
</tbody>
</table>
<br>
<p style="font-size: 34px; line-height: 20px; color: #000006; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 34px; line-height: 20px; color: #000006; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;">&nbsp;</p>
<p style="font-size: 16px; line-height: 20px; color: #000006; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: lighter;"><br><br></p>
<p style="font-size: 16px; line-height: 20px; color: #fb0624; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: lighter;">&nbsp;</p>
<p style="font-size: 16px; line-height: 20px; color: #fb0624; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: lighter;">&nbsp;</p>
<p style="font-size: 20px; line-height: 20px; color: #000815; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: bold;"><strong> <br><br></strong></p>
</td>
</tr>
<tr style="height: 578px;">
<td style="background: #ffffff; padding: 15px; color: #f0f0fc; font-size: 12px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; text-align: center; font-weight: lighter; font-style: normal; height: 578px; width: 1762px;" align="center" bgcolor="#1F1F1F" valign="middle">
<p style="font-size: 16px; line-height: 20px; color: #fb0624; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: lighter;"><span style="color: #04369b; font-size: 24px;"><strong> <br>Considering enrolling?</strong></span></p>
<p style="font-size: 16px; line-height: 20px; color: #fb0624; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; margin: 0; font-weight: lighter;"><span style="font-size: 16px; color: #0a0a0a;"> <br></span></p>
<table width="200" border="0" align="center" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" bgcolor="#092BFC" valign="middle"><br><a href="https://form.jotform.com/90776125531255" style="color: #f0f0f0;"> <br><span style="font-size: 14px;">Apply</span> <br></a> <br><br></td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="200" border="0" align="center" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><a href="https://www.facebook.com/montrealcollege/"><img src="https://gallery.mailchimp.com/59a7f33db8efd3e35c3034f42/images/702bec2b-2061-41a3-a590-34bc48a321df...." width="75" height="55" alt=""></a></td>
<td><a href="https://www.instagram.com/montrealcollege/"><img src="https://mcusercontent.com/59a7f33db8efd3e35c3034f42/images/b36e009c-1c39-4184-8bf8-d28dae731b88.png" width="85" height="79" alt=""></a></td>
</tr>
</tbody>
</table>
<br><span style="color: #020000;">Montreal College of Information Technology<br>1255 Boul.Robert Bourassa, Montreal , Quebec, H3B3V8<br>www.montrealcollege.ca </span><span style="font-size: 11px; color: #000000;"> <br><span style="color: #010000;"><a href="*|UNSUB|*">Unsubscribe</a> from email communications</span></span>
<p style="font-size: 18px; font-weight: normal; color: #0740f8;">&nbsp;</p>
<p>&nbsp;</p>
<p style="font-size: 10px; font-weight: normal; color: #0740f8;">&nbsp;</p>
</td>
</tr>
<tr style="height: 112px;">
<td style="color: #b3b3b3; text-align: left; background: #092bfc; height: 112px; width: 1792px;" bgcolor="#092BFC">
<p style="font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size: 12px; line-height: 20px; padding-left: 15px; font-weight: normal; font-style: normal; color: #939090;"><br><span style="font-size: 11px;"><span style="color: #d3d3d3;">Montreal College of Information Technology<br>1255 Boul.Robert Bourassa, Montreal , Quebec, </span></span>H3B3V8<br><span style="font-size: 11px;"><span style="color: #d3d3d3;">www.montrealcollege.ca </span> <br><a href="*|UNSUB|*"><span style="color: #d3d3d3;">Unsubscribe</span></a><span style="color: #d3d3d3;"> from email communications</span></span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<map name="Map">
<area coords="49,49,46" shape="circle" href="https://calendly.com/aneta-sujkowska">

<area coords="183,48,44" shape="circle" href="https://calendly.com/ankula-basoli-program-advisor-international-student">

<area coords="320,47,45" shape="circle" href="https://calendly.com/ovee-mirza%20">
</map>

0 Me gusta
1 Soluciones aceptada
SandyG1
Solución
Colaborador | Partner
Colaborador | Partner

unresponsive custom coded landing page

resolver

You're defining a lot of widths inline here.

My suggestion here would be to create a Cascading Style Sheet (CSS) to go with this landing page template and actually try to manipulate the page & table that way.

 

For example, the table which sits in the middle of the page would normally not contain any inline styles.

 

Inline styles are style properties set inline with the table HTML

for example

 

<table style="width: 2000px">

 

Ver la solución en mensaje original publicado

2 Respuestas 2
DMarley
Miembro

unresponsive custom coded landing page

resolver
Hello Sandy G,I’m having a similar issue on my page as well, the mobile header is not having the written contents on it. And also just a section doesn’t align on my page on mobile view : http://7237680.hs-sites.com/lp-page

Help
0 Me gusta
SandyG1
Solución
Colaborador | Partner
Colaborador | Partner

unresponsive custom coded landing page

resolver

You're defining a lot of widths inline here.

My suggestion here would be to create a Cascading Style Sheet (CSS) to go with this landing page template and actually try to manipulate the page & table that way.

 

For example, the table which sits in the middle of the page would normally not contain any inline styles.

 

Inline styles are style properties set inline with the table HTML

for example

 

<table style="width: 2000px">