Email no responsive to mobile phone

MK_McNerney
Level 2

Email no responsive to mobile phone

Hi, so I am at a loss as to why my header and footer are not responding to mobile screen sizes.

Can someone look at this code and let me know what I am doing wrong...

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta name="robots" content="noindex,nofollow" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet" type="text/css" />

    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css" />

    <!--[if mso]>

<style type='text/css'>

.primary-font {

font-family: Arial, sans-serif !important;

}

</style>

<![endif]-->

    <!--[if mso]>

<style type='text/css'>

.secondary-font {

font-family: Arial, sans-serif !important;

}

</style>

<![endif]-->

    <style> @media only screen and (max-width: 600px) {table#boxing { width: 100% !important } .responsive {

    width: 100%;

    height: auto;

} } </style>

    <!--[if gte mso 9]>

      <style type="text/css">

       #hero .table3-3{

     width: 100% !important;

       }

</style>

<![endif]-->

    <!--[if gte mso 9]>

      <style type="text/css">

       #hero .table1-2{

     width: 100% !important;

       }

</style>

<![endif]-->

    <!--[if gte mso 9]>

      <style type="text/css">

       #hero .table1-3{

     width: 100% !important;

       }

      </style>

  <![endif]-->

    <!--[if gte mso 9]>

      <style type="text/css">

       #hero .table1-4{

     width: 100% !important;

       }

      </style>

  <![endif]-->

    <!--[if gte mso 9]>

      <style type="text/css">

       #hero .table2-3{

     width: 100% !important;

       }

      </style>

  <![endif]-->

    <style media="all"> @-ms-viewport { width: device-width; } (img {max-width: 100%;} .responsive {

    width: 100%;

    height: auto;} </style>

    <style media="all"> @media only screen and (max-width: 640px) {.mktoVideoThumbnail { width: 100% !important; height: auto !important; max-height: inherit !important; min-height: inherit !important } body { width: auto !important } table.table600 { width: 450px !important } table.table-inner { width: 86% !important } table.table1-2 { width: 47% !important; clear: both } table.table1-3 { width: 29.4% !important } table.table1-4 { width: 100% !important; text-align: left !important } table.table2-3 { width: 64% !important; text-align: center !important } table.table3-3 { width: 100% !important; text-align: center !important; clear: both } table.footer-logo { width: 10% !important; text-align: right !important } td.outer { min-width: 0 !important } td.stack { padding-bottom: 40px !important } .stack-tablet { padding-bottom: 20px !important; overflow: visible !important; float: none !important; mso-hide: none !important; display: block !important } img.mobile-img { width: 100% !important } td.center-tablet { text-align: center !important } td.hide-tablet { display: none !important } table.footer-column { width: 47% !important; text-align: left !important } .m_two-articles .table1-2 { width: 100% !important } .m_two-articles .photo img { width: 100% !important } .m_two-articles .stack-tablet td { height: 60px !important } .m_free-image img { width: 100% !important } } @media only screen and (max-width: 479px) {body { width: auto !important } table.table600 { width: 290px !important } table.table-inner { width: 80% !important; float: none !important } table.table1-2 { width: 100% !important; clear: both } table.table1-3 { width: 100% !important; clear: both } table.table1-4 { width: 100% !important; text-align: center !important } table.table2-3 { width: 100% !important; text-align: center !important } table.table3-3 { width: 100% !important; text-align: center !important; clear: both } table.footer-logo { width: 60% !important; text-align: center !important } td.outer { min-width: 0 !important } td.td3-1 { width: 60% !important; text-align: center !important } .stack-smartphone { padding-bottom: 20px !important; overflow: nonvisible !important; float: none !important; display: block !important; mso-hide: none !important } td.center-smartphone { text-align: center !important } img.mobile-img { width: 100% !important } td.center-tablet { text-align: center !important } td.hide-smartphone { display: none !important } table.footer-column { width: 100% !important; text-align: center !important } .m_free-image img { width: 100% !important } .m_hr .table-inner { width: 100% !important } .responsive {

    width: 100%;

    height: auto;

    }} </style>