htmlcssmedia-querieshtml-email
Deactivate the switch to hamburger menu (media Rule)
In an email I'm working on, there is the following media rule which, once the screen becomes smaller than 660px collapses the normal menu (a row of a few links) into a hamburger menu.
@media only screen and (max-width:660px) {
.fw{
width:100% !important;
min-width:0 !important;
}
.fl{
width: 100% !important;
display: block !important;
}
.mh,
.mobile_hidden {
display: none !important;
}
.m-text-center{
text-align: center !important;
}
.dh,
.desktop_hidden {
display: block !important;
}
.mobile-border-top{
border-top: 1px solid #e0e0e0;
}
The menu when the screen is bigger than 660px:
The menu when the screen becomes smaller than 660px:
The problem is this is an email, and a menu collapsed into a hamburger menu loses its function because the recipient cannot open it.
I would like to deactivate this collapse, but I don't know where in the HTML code I should track this behavior. I can capture the containers using Inspect Element, but I don't know which attributes I should look for.
UPDATE: Here is the entire HTML/CSS code for the menu. I removed brand information and all the unnecessary blocks for clarity.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" e-locale="en-US" e-is-multilanguage="false" style="background: #fff; width: 100% !important; margin: 0 !important; padding: 0 !important;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>StackOverflow Question</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style>
#outlook a{ padding:0; }
.ReadMsgBody, .ExternalClass{
width:100%;
}
.ExternalClass, .ExternalClass *, .ExternalClass p, .ExternalClass font, .ExternalClass td, .ExternalClass div, .b-message-body {
line-height: 100%;
}
body, table, td, p, a, li, blockquote{
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
mso-line-height-rule: exactly;
line-height: normal;
}
body{
height:100% !important;
}
table, td{
border-collapse: collapse !important;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
border-spacing: 0;
mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0;
}
img{
-ms-interpolation-mode:bicubic;
border:0;
line-height:100%;
outline:none;
text-decoration:none;
margin: 0;
}
.img{
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
html,
body{
width:100% !important;
margin: 0 !important;
padding: 0 !important;
background: #fff;
}
.box{
background: #fff;
}
a,
a:link,
a:active,
a:visited,
a:hover,
.yshortcuts,
.yshortcuts a span {
text-decoration: none;
font-weight: normal;
color: #5e2674;
}
a[x-apple-data-detectors],
*[lang="uri"] a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.text-brand,
.text-brand a,
a.text-brand,
a.text-brand:link,
a.text-brand:active,
a.text-brand:visited,
a.text-brand:hover{
color: #5e2674;
}
.text-accent,
.text-accent a,
a.text-accent,
a.text-accent:link,
a.text-accent:active,
a.text-accent:visited,
a.text-accent:hover{
color: #222222;
}
.text-discount,
.text-discount a,
a.text-discount,
a.text-discount:link,
a.text-discount:active,
a.text-discount:visited,
a.text-discount:hover{
color: #dc3545;
}
.text-primary,
a.text-primary,
a.text-primary:link,
a.text-primary:active,
a.text-primary:visited,
a.text-primary:hover{
color: #222;
}
.text-secondary,
.text-secondary a,
a.text-secondary,
a.text-secondary:link,
a.text-secondary:active,
a.text-secondary:visited,
a.text-secondary:hover{
color: #666;
}
.text-hint,
.text-hint a,
a.text-hint,
a.text-hint:link,
a.text-hint:active,
a.text-hint:visited,
a.text-hint:hover{
color: #999;
}
.text-separator,
.text-separator a,
a.text-separator,
a.text-separator:link,
a.text-separator:active,
a.text-separator:visited,
a.text-separator:hover{
color: #E0E0E0;
}
.text-white,
.text-white a,
a.text-white,
a.text-white:link,
a.text-white:active,
a.text-white:visited,
a.text-white:hover{
color: #fff;
}
.text-mandatory,
.text-mandatory a,
a.text-mandatory,
a.text-mandatory:link,
a.text-mandatory:active,
a.text-mandatory:visited,
a.text-mandatory:hover{
color: #ff0000;
}
.text-heading{ font-family: Nunito, sans-serif; }
.text-body{ font-family: Nunito, sans-serif; }
.text-bold{ font-weight: bold; }
.text-bold a{ font-weight: bold; }
.text-underline{ text-decoration: underline; }
.text-stroke{ text-decoration: line-through; }
.text-italic{ font-style: italic; }
.text-small{ font-size: 11px; }
.text-base{ font-size: 14px; }
.text-medium{ font-size: 16px; }
.text-large{ font-size: 32px; }
.text-x-large{ font-size: 52px; }
.text-xx-large{ font-size: 96px; }
.text-small, .lineheight-small{ line-height: 13px; }
.text-base, .lineheight-base{ line-height: 20px; }
.text-medium, .lineheight-medium{ line-height: 22px; }
.text-large, .lineheight-large{ line-height: 32px; }
.text-x-large, .lineheight-x-large{ line-height: 52px; }
.text-xx-large, .lineheight-xx-large{ line-height: 96px; }
.text-left{ text-align: left; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }
.text-nowrap{ white-space: nowrap; }
.trans-td{ line-height: 0; }
.trans{ display: block; line-height: 0; }
.mg{ margin: 15px; }
.mg-t{ margin-top: 15px; }
.mg-r{ margin-right: 15px; }
.mg-b{ margin-bottom: 15px; }
.mg-l{ margin-left: 15px; }
.pd{ padding: 15px; }
.pd-t{ padding-top: 15px; }
.pd-r{ padding-right: 15px; }
.pd-b{ padding-bottom: 15px; }
.pd-l{ padding-left: 15px; }
.table-force{ width: 100%; }
.dh,
.desktop_hidden {
display: none;
}
@media only screen and (max-width:660px) {
.fw{
width:100% !important;
min-width:0 !important;
}
.fl{
width: 100% !important;
display: block !important;
}
.mh,
.mobile_hidden {
display: none !important;
}
.m-text-center{
text-align: center !important;
}
.dh,
.desktop_hidden {
display: block !important;
}
.mobile-border-top{
border-top: 1px solid #e0e0e0;
}
input[type=checkbox]:checked + .content{
max-height:500px !important;
}
.content{
max-height:0px;
overflow:hidden;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
transition:all 500ms ease;
}
}
@media yahoo {
.yh {
display: none !important;
}
.mby20 {
margin-bottom: 20px;
}
}
.cta-td {
background-color: #222222;
color: #ffffff;
padding: 12px 36px;
border-radius: 3px;
}
.cta-td-small {
background-color: #222222;
color: #ffffff;
padding: 12px 24px;
border-radius: 3px;
}
.cta-td-none {
background-color: #222222;
color: #ffffff;
padding: 12px 0px;
border-radius: 3px;
}
.cta-td a {
background-color: #222222;
color: #ffffff;
display: block;
text-decoration: none;
border-radius: 3px;
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
src: local('Nunito Bold'), local('Nunito-Bold'), url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofAjsOUYevIWzgPDA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}</style>
</head>
<body style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-line-height-rule: exactly; line-height: normal; background: #fff; height: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important;" data-new-gr-c-s-check-loaded="14.1113.0" data-gr-ext-installed=""><div ems:preheader="" style="display:none!important;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all">Lorem Ipsum</div><table width="100%" cellpadding="0" cellspacing="0" border="0"><tbody><tr><td align="center"><font face="Arial, Helvetica" size="1" style="font-size:9px;color:#6d6d6d">Om e-postmeddelandet inte visas på rätt sätt kopierar följande länk till webbläsaren:<br> <a href="https://www.google.com" target="_blank"><font face="Arial, Helvetica" size="1" style="font-size:9px;color:#6d6d6d; text-decoration: none;">https://www.google.com</font></a><br></font></td></tr></tbody></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<tbody><tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<table class="fw" width="660" border="0" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<tbody><tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" e-block-id="5bc6ed5e2f6aa7dbd0000001" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<tbody><tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<!--[if !mso 9]><!-->
<label class="dh" for="button" onclick="" style="display: none; overflow: auto; cursor: pointer; border-bottom: 1px solid #e0e0e0;">
<table width="100%" border="0" cellpadding="15" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<tbody><tr>
<td align="left" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<font e-editable="name" class="text-body text-base text-brand text-bold" style="color: #5e2674; font-family: Nunito, sans-serif; font-weight: bold; font-size: 14px; line-height: 20px;">KATEGORIER</font>
</td>
<td align="right" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<font class="text-body text-base text-brand" style="color: #5e2674; font-family: Nunito, sans-serif; font-size: 14px; line-height: 20px;">☰</font>
</td>
</tr>
</tbody></table>
</label>
<input id="button" type="checkbox" style="mso-hide:all; display:none !important; max-height:0px; overflow:hidden;">
<!--<![endif]-->
<div class="content">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<tbody><tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<table border="0" cellpadding="0" cellspacing="0" class="fw" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<tbody><tr>
<td align="center" class="fl" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<table border="0" cellpadding="8" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<tbody><tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<a e-editable="“link1Url”" href="https://www.google.com" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-line-height-rule: exactly; line-height: normal; text-decoration: none; font-weight: normal; color: #5e2674;" target="_blank"><span e-editable="“link1Label”" class="text-body text-base text-brand text-bold" style="color: #5e2674; font-family: Nunito, sans-serif; font-weight: bold; font-size: 14px; line-height: 20px;">DOFT</span></a>
</td>
</tr>
</tbody></table>
</td>
<td height="1" width="1" bgcolor="#e0e0e0" class="dh fl" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; display: none; border-collapse: collapse !important;">
<img src="./trans.gif" class="trans" width="1" height="1" style="-ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; margin: 0; display: block; line-height: 0;">
</td>
<td align="center" class="fl" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<table border="0" cellpadding="8" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<tbody><tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<a e-editable="“link2Url”" href="https://www.google.com" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-line-height-rule: exactly; line-height: normal; text-decoration: none; font-weight: normal; color: #5e2674;" target="_blank"><span e-editable="“link2Label”" class="text-body text-base text-brand text-bold" style="color: #5e2674; font-family: Nunito, sans-serif; font-weight: bold; font-size: 14px; line-height: 20px;">HUDVÅRD</span></a>
</td>
</tr>
</tbody></table>
</td>
<td height="1" width="1" bgcolor="#e0e0e0" class="dh fl" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; display: none; border-collapse: collapse !important;">
<img src="./trans.gif" class="trans" width="1" height="1" style="-ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; margin: 0; display: block; line-height: 0;">
</td>
<td align="center" class="fl" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<table border="0" cellpadding="8" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<tbody><tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<a e-editable="“link3Url”" href="https://www.google.com" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-line-height-rule: exactly; line-height: normal; text-decoration: none; font-weight: normal; color: #5e2674;" target="_blank"><span e-editable="“link3Label”" class="text-body text-base text-brand text-bold" style="color: #5e2674; font-family: Nunito, sans-serif; font-weight: bold; font-size: 14px; line-height: 20px;">HÅRVÅRD</span></a>
</td>
</tr>
</tbody></table>
</td>
<td height="1" width="1" bgcolor="#e0e0e0" class="dh fl" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; display: none; border-collapse: collapse !important;">
<img src="./trans.gif" class="trans" width="1" height="1" style="-ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; margin: 0; display: block; line-height: 0;">
</td>
<td align="center" class="fl" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<table border="0" cellpadding="8" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<tbody><tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<a e-editable="“link4Url”" href="https://www.google.com" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-line-height-rule: exactly; line-height: normal; text-decoration: none; font-weight: normal; color: #5e2674;" target="_blank"><span e-editable="“link4Label”" class="text-body text-base text-brand text-bold" style="color: #5e2674; font-family: Nunito, sans-serif; font-weight: bold; font-size: 14px; line-height: 20px;">MAKEUP</span></a>
</td>
</tr>
</tbody></table>
</td>
<td height="1" width="1" bgcolor="#e0e0e0" class="dh fl" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; display: none; border-collapse: collapse !important;">
<img src="./trans.gif" class="trans" width="1" height="1" style="-ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; margin: 0; display: block; line-height: 0;">
</td>
<td align="center" class="fl" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<table border="0" cellpadding="8" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<tbody><tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: normal; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; border-collapse: collapse !important;">
<a e-editable="“link5Url”" href="https://www.google.com" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-line-height-rule: exactly; line-height: normal; text-decoration: none; font-weight: normal; color: #5e2674;" target="_blank"><span e-editable="“link5Label”" class="text-body text-base text-brand text-bold" style="color: #5e2674; font-family: Nunito, sans-serif; font-weight: bold; font-size: 14px; line-height: 20px;">NYHETER</span></a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td height="1" bgcolor="#e0e0e0" class="trans-td" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; line-height: 0; border-collapse: collapse !important;">
<img src="./trans.gif" class="trans" width="1" height="1" style="-ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; margin: 0; display: block; line-height: 0;">
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body></html>
Solution
It is fixed. I can't upload the all the codes here becaues of the body character limitation. But here are the changes I have made:
- Remove/Make comment of .fl class from the media query (at 224 line)
/* .fl{
width: 100% !important;
display: block !important;
} */
- Remove/Make comment of .content class from the media query (at 250 line)
/* .content{
max-height:0px;
overflow:hidden;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
transition:all 500ms ease;
} */
- Set the table (at 324 line) style to "display: none;" at the end of the style with inline CSS.
