unresponsive custom coded landing page

josephmanalil — Sun, 19 Jul 2020 14:53:32 GMT

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">
 
 
<img src="https://mcusercontent.com/59a7f33db8efd3e35c3034f42/images/8a69e468-6cf8-4e65-8564-606d07208e60.png" width="113" height="28" alt=""> <a href="https://calendly.com/zenil-iqbal" style="text-decoration: none; font-size: xx-large;"> * ****</a>
<a href="https://calendly.com/zenil-iqbal" style="text-decoration: none;"> </a>
 
More skills ______ More employability _________ More opportunities with Second year Interlinked Career pathway program 
 
 
 
 
 
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
 
<a href="https://calendly.com/zenil-iqbal" style="font-size: 36px; color: #0334ed;"></a> What is the advantage  of doing a SECOND YEAR Career Pathway Program ? 
 
<a href="https://calendly.com/zenil-iqbal" style="font-size: 36px; color: #0334ed;">★★★★★</a>
 
With a 2 year program you can get an extended stay option <a href="https://calendly.com/zenil-iqbal"></a>
With extensive changes to the culture of work and social engagement, globally, the idea of extending your studies is advantageous. From acquiring employability skills to obtaining technical tools to stay relevant in the job market. The program is devised to acquire additional technical skills to be employable and be competitive in the market.
For instance if you have a background in Java you will be able to expand your employability by doing an A.E.C in Big Data, because Big Data developer needs programming expertise using Java. 
<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;"> First Program </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 program to do</td>
</tr>
<tr>
<td style="text-align: center; width: 245px;"> Java Development </td>
<td style="text-align: center; width: 220px;" bgcolor="#95AFF7">Get into Data Science</td>
<td style="text-align: center; width: 293px;">Big Data Developer</td>
</tr>
<tr bgcolor="#CED1D7">
<td style="width: 245px;" align="center" bgcolor="#E0E8F8"> Software Testing </td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">SAP Quality System Analyst</td>
<td style="width: 293px;" align="center" bgcolor="#E0E8F8">SAP Supply Chain Management</td>
</tr>
<tr>
<td style="width: 245px;" align="center"> Business Intelligence Developer </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"> Digital Marketing & Web </td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">Business Analyst Marketing</td>
<td style="width: 293px;" align="center" bgcolor="#E0E8F8">Business Analyst IT</td>
</tr>
<tr>
<td style="width: 245px;" align="center"> Networking & Technical Support </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"> Supply Chain Manager </td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">Business Analyst</td>
<td style="width: 293px;" align="center" bgcolor="#E0E8F8">Business Intelligence & Visualization Analyst</td>
</tr>
<tr>
<td style="width: 245px;" align="center"> Business Analyst IT </td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">ELT Tester</td>
<td style="width: 293px;" align="center">Business Intelligence & Visualization Analyst</td>
</tr>
<tr bgcolor="#CED1D7">
<td style="width: 245px;" align="center" bgcolor="#E0E8F8"> Big Data Developer </td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">Data Analyst</td>
<td style="width: 293px;" align="center" bgcolor="#E0E8F8">Software Testing</td>
</tr>
<tr bgcolor="#CED1D7">
<td style="width: 245px;" align="center" bgcolor="#F9FAFC"> Big Data Developer </td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7">Data Analyst</td>
<td style="width: 293px;" align="center" bgcolor="#FFFFFF">Software Testing</td>
</tr>
<tr bgcolor="#CED1D7">
<td style="width: 245px;" align="center" bgcolor="#E0E8F8"> Java Developer </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 </td>
<td style="width: 220px;" align="center" bgcolor="#95AFF7"> Java Enterprise Software Tester </td>
<td style="width: 293px;" align="center">Software Testing</td>
</tr>
</tbody>
</table>
 
 
 
To know more 
 
<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"> <a href="https://outlook.office365.com/owa/calendar/InternationalStudentAdvising@montrealcollege.ca/bookings/" style="color: #f0f0f0;"> Talk to us </a> </td>
</tr>
</tbody>
</table>
 
 
 
 
 
 
 
</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">
 Considering enrolling?
 
<table width="200" border="0" align="center" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" bgcolor="#092BFC" valign="middle"> <a href="https://form.jotform.com/90776125531255" style="color: #f0f0f0;"> Apply </a> </td>
</tr>
</tbody>
</table>
 
 
 
<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.png" 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>
 Montreal College of Information Technology 1255 Boul.Robert Bourassa, Montreal , Quebec, H3B3V8 www.montrealcollege.ca <a href="*|UNSUB|*">Unsubscribe</a> from email communications
 
 
 
</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;"> Montreal College of Information Technology 1255 Boul.Robert Bourassa, Montreal , Quebec, H3B3V8 www.montrealcollege.ca <a href="*|UNSUB|*">Unsubscribe</a> from email communications
</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>

Re: unresponsive custom coded landing page

SandyG1 — Sun, 19 Jul 2020 15:37:20 GMT

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">

Re: unresponsive custom coded landing page

DMarley — Sat, 18 Sep 2021 11:00:30 GMT

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

topic Re: unresponsive custom coded landing page in CMS Development

unresponsive custom coded landing page

Re: unresponsive custom coded landing page

Re: unresponsive custom coded landing page