unresponsive custom coded landing page

josephmanalil · July 19, 2020, 2:53pm

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”>
\ 
\ 
<img src=“https://mcusercontent.com/59a7f33db8efd3e35c3034f42/images/8a69e468-6cf8-4e65-8564-606d07208e60.png” width=“113” height=“28” alt=“”> <a href=“Calendly - Zenil Iqbal” style=“text-decoration: none; font-size: xx-large;”> * ****</a>
<a href=“Calendly - 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=“Calendly - Zenil Iqbal” style=“font-size: 36px; color: #0334ed;”></a> What is the advantage \ of doing a SECOND YEAR Career Pathway Program ? 
\ 
<a href=“Calendly - 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=“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=“Calendly - Aneta Sujkowska”>
<area coords=“183,48,44” shape=“circle” href=“Calendly - Ankula Basoli”>
<area coords=“320,47,45” shape=“circle” href=“https://calendly.com/ovee-mirza%20”>
</map>

SandyG1 · July 19, 2020, 3:37pm

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

DMarley · September 18, 2021, 11:00am

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		Replies	Views
Landing Page - Mobile not responsive CMS Development	4	2200	June 16, 2022
Table in landing page looks bad on mobile CMS Development professional	7	3046	November 27, 2023
Desperate! Make a landing page mobile responsive. Blog, Website & Page Publishing landing-pages , website-pages	2	3115	January 7, 2022
Landing Pages look terrible on mobile CMS Development	1	2631	July 12, 2018
created template CMS Development starter	2	961	January 17, 2024

unresponsive custom coded landing page

Related topics