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>
.png)