I am working on email newsletter for one of my client and designed the whole email newsletter in table(instead of DIV) but having hard time hiding a table in responsive view and one another table in desktop view
I have tried display:none important! and it didn't work
You can see my newsletter here.
I want to hide right column in mobile view here.
Please let me know if someone else encountered the similar problem and how did they resolve that.
It seems that you put display: none; in one of your media queries but not all. I tried putting it in the "general classes" (as you call it in your code) and it works like a charm (see here).
So a code that works is :
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
<title>Oncology</title>
<style type="text/css">
html, body {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
background:url(../images/bg01.jpg) left top repeat;
}
/* Global Classes starts */
* {
outline:none;
}
div, form, P
{
margin:0px;
padding:0px;
}
A IMG /* This Class will disble border over any link on images*/
{
border:none;
outline:none
}
a
{
text-decoration:underline;
color:#004274;
}
a:hover
{
text-decoration:none;
color:#cb0202;
}
p
{
color:#000000;
padding:5px 0px 5px 0px;
margin:5px 0px 5px 0px;
}
p a
{
text-decoration:underline;
color:#004274;
}
p a:hover
{
text-decoration:none;
color:#cb0202;
}
UL
{
/* Controls NORMAL UL */
margin:0 0 0 15px;
padding:0 0 0 0;
list-style-type:none;
color:#000000;
}
UL LI
{
/* Controls NORMAL li inside UL */
margin:0 0 3px 0;
padding:0 0 0 12px;
}
UL strong {
font-size:15px;
}
OL
{
/* Controls NORMAL OL */
margin:0 0 0 28px;
padding:0 0 0 0;
list-style-type:decimal;
}
OL LI
{
/* Controls NORMAL li inside OL */
text-decoration:underline;
color:#000000;
}
OL LI A, LI A , OL A
{
/* Controls LINKS inside OL */
text-decoration:underline;
color:#004274;
}
OL A:HOVER
{
/* Controls LINKS HOVER inside OL */
text-decoration:none;
color:#cb0202;
}
UL A
{
/* Controls LINKS inside UL */
text-decoration:underline;
color:#004274;
}
UL A:HOVER
{
/* Controls LINKS HOVER inside UL */
text-decoration:none;
color:#cb0202;
}
/* ----Global Classes ends-----*/
.clr { margin:0; padding:0; clear:both;}
.main_wrapper{ margin:0px auto; padding:0px; max-width:768px; background:url(http://www.webdesignagencynewyork.com/dev/oncology/images/header-bg.png)left top repeat-x, url(http://www.webdesignagencynewyork.com/dev/oncology/images/footer-bg.png)left bottom repeat-x;}
.main_container{ margin:0px auto; padding:35px 0px 20px; width:78%;}
.header_container{ margin:0px auto 20px; padding:0px 10px;}
.header_logo{ margin:0px; padding:0px; width:55%; float:left; text-align:center;}
.header_logo img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.header_social{ margin:0px; padding:0px; width:30%; float:right; text-align:right;}
.header_social_date{ margin:0px; padding:0px;}
.header_social_date h6{ margin:0px 0px 30px 0px; padding:0px; color:#272626; font-size:13px; font-weight:400; display:block;}
.header_social_image{ margin:0px; padding:0px;}
.header_social_image img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.header_info{ margin:0px 0px 20px 0px; padding:0px; text-align:center;}
.header_info ul{ margin:0px; padding:0px; list-style-type:none; text-align:center;}
.header_info ul li{ margin:0px; padding:0px 12px 0px 6px; display:inline-block; background:url(http://www.webdesignagencynewyork.com/dev/oncology/images/li-div.png) right top no-repeat;}
.header_info ul li a{ margin:0px; padding:0px; color:#7e3553; font-size:15px; font-weight:normal; text-decoration:none; display:block;}
.header_info ul li:last-child{ background:none;}
.header_info ul li a:hover{ color:#017c9c;}
.banner{ margin:0px auto; padding:0px;}
.banner img{ margin:0px; padding:0px; width:100%;}
.caption_wrapper{ margin:0px; padding:0px; width:100%; position:relative; z-index:100;}
.caption_container{ margin:-88px auto 40px ; padding:0px; width:62%;}
.caption_container h1{margin:0px 0px 8px 0px; padding:0px; color:#fff; font-size:30px; font-weight:400; line-height:30px; display:block;}
.caption_container h2{margin:0px; padding:0px; color:#fff; font-size:24px; font-weight:400; line-height:30px; display:block;}
.body_container{ margin:0px auto; padding:0px 10px;}
.body_left{ margin:0px; padding:0px; width:64%; float:left;}
.body_left_box{ margin:0px 0px 15px 0px; padding:0px; }
.news_read{ margin:0px 0px 5px 0px; padding:0px; border-bottom:1px solid #d2d3d2;}
.news_read strong{ margin:0px; padding:2px 6px; color:#fff; font-size:13px; font-weight:400; text-decoration:none; display:inline-block; background:#017c9c;}
.news_box{ margin:0px 0px 5px 0px; padding:0px; border-bottom:2px dotted #cccccc;}
.news_box h6{ margin:0px; padding:0px; color:#272626; font-size:13px; font-weight:400; line-height:16px; display:block;}
.news_box h6 a{ margin:0px 0px 8px 0px; padding:0px; color:#272626; font-size:13px; font-weight:400; line-height:16px; display:block; text-decoration:none;}
.news_box h6 a:hover{ color:#017c9c;}
.news_box label{ margin:0px; padding:0px; color:#616364; font-size:10px; font-weight:400; display:block;}
.news_box label span{ margin:0px; padding:0px; color:#7e3553; font-size:10px; font-weight:400; font-style:italic;}
.news_box p{ margin:0px; padding:0px 0px 5px 0px; color:#808080; font-size:11px; font-weight:400; line-height:14px;}
.news_box p a{ margin:0px; padding:0px; color:#0082a2; font-size:10px; font-weight:400; text-decoration:none;}
.news_box p a:hover{ color:#272626;}
.social_link{ margin:0px; padding:0px;}
.social_link img{ margin:0px 0px 6px 0px; padding:0px; width:auto; height:auto; max-width:100%;}
.body_right{ margin:0px; padding:0px; width:33%;display:none; float:right;}
.subscribe{ margin:0px 0px 40px 0px; padding:0px; text-align:center;}
.subscribe a{ margin:0px; padding:6px 15px; color:#fff; font-size:12px; font-weight:400; display:inline-block; text-decoration:none; border-radius:5px;
border-bottom:1px solid #000;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Opera */
background-image: -o-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #017c9c), color-stop(1, #4eaac2));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #017c9c 0%, #4eaac2 100%);
}
.subscribe a:hover{ color:#272626;}
.sidebox1{ margin:0px 0px 35px; padding:0px;}
.sidebox1 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.sidebox2{ margin:0px; padding:0px;}
.sidebox2 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.footer{ margin:0px auto; padding:0px; text-align:center;}
.footer p{ margin:0px; padding:0px 0px 10px 0px; color:#363333; font-size:11px; font-weight:400; line-height:18px;}
.site_link{ margin:0px 0px 8px 0px; padding:0px; text-align:center;}
.site_link a{ margin:0px; padding:10px 35px; color:#fff; font-size:15px; font-weight:400; display:inline-block; text-decoration:none; border-radius:3px;
border-bottom:1px solid #000;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Opera */
background-image: -o-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #017c9c), color-stop(1, #4eaac2));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #017c9c 0%, #4eaac2 100%);
}
.site_link a:hover{ color:#272626;}
.footer span{ margin:0px 0px 5px 0px; padding:0px; color:#2eb5d9; font-size:11px; display:block;}
.footer span a{ margin:0px; padding:0px; color:#2eb5d9; font-size:11px; display:inline-block; text-decoration:none;}
.footer label{ margin:0px 0px 10px 0px; padding:0px; color:#999999; font-size:11px; display:block;}
.footer label a{ margin:0px; padding:0px; color:#999999; font-size:11px; display:inline-block;}
.footer_logo{ margin:0px 0px 10px 0px; padding:0px;}
.footer_logo img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.copywrite{ margin:0px; padding:0px;}
.copywrite span{ margin:0px 0px 5px 0px; padding:0px; color:#017c9c; font-size:11px; display:block;}
.copywrite label{ margin:0px 0px 5px 0px; padding:0px; color:#363333; font-size:11px; display:block;}
.left_sidebox1{ margin:0px 0px 0px; padding:0px; text-align:center; display:none;}
.left_sidebox1 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.left_sidebox2{ margin:0px; padding:0px; text-align:center; display:none;}
.left_sidebox2 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.body_left .subscribe{ display:none;}
.footer label br{ display:none;}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.main_wrapper{ width:100%;}
.main_container{ padding:20px 0px 10px; width:94%;}
.header_social h6{ margin:0px 0px 20px 0px;}
.caption_container { margin: -68px auto 30px;}
.caption_container h1{ font-size:24px; line-height:24px;}
.caption_container h2{ font-size:18px; line-height:18px;}
.subscribe a{ font-size:10px;}
.footer p br{ display:none;}
}
@media only screen and (max-width: 479px) {
.main_wrapper{ width:100%;}
.main_container{ padding:20px 0px 10px; width:100%;}
.header_container { margin: 0 auto 15px;}
.header_logo{ margin:0px 0px 20px 0px; width:100%; float:none;}
.header_social{ width:100%; float:none; text-align:justify;}
.header_social h6{ margin:0px; display:inline-block;}
.header_social_date{ margin:5px 0px 0px 0px; width:45%; float:left;}
.header_social_image{ width:45%; float:right; text-align:right;}
.header_info ul li{padding: 0 8px 0 4px;}
.header_info ul li a{ font-size:11px;}
.header_info { margin: 0 0 12px;}
.caption_container { margin: -50px auto 20px;}
.caption_container h1{margin: 0 0 5px; font-size:18px; line-height:18px;}
.caption_container h2{ font-size:13px; line-height:13px;}
.body_right{ display:none;}
.body_left{ float:none; width:100%;}
.left_sidebox1{ margin: 12px 0 6px; display:block;}
.left_sidebox2{ margin:0px 0px 6px 0px; display:block;}
.body_left .subscribe{ margin: 0 0 10px; display:block;}
.body_left .subscribe a{ padding:7px 25px; border-bottom:0px;}
.footer label br{ display:block;}
}
</style>
</head>
<body>
<div class="main_wrapper">
<div class="main_container">
<div class="header_container">
<div class="header_logo"><a href="#"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/logo.png" ></a></div>
<div class="header_social">
<div class="header_social_date">
<h6>May 18, 2015</h6>
</div>
<div class="header_social_image">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb-icon.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw-icon.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in-icon.png"></a>
</div>
</div>
<div class="clr"></div>
</div>
<div class="header_info">
<ul>
<li><a href="#">Online First</a></li>
<li><a href="#">FDA Updates</a></li>
<li><a href="#">Clinical Resource Center</a></li>
</ul>
</div>
<div class="banner">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/header_banner.png">
<div class="caption_wrapper">
<div class="caption_container">
<h1>Simple. Fast. Precise</h1>
<h2>Empowering Regional Anesthesio</h2>
</div>
</div>
</div>
<div class="body_container">
<div class="body_left">
<div class="body_left_box">
<div class="subscribe"><a href="#">Subscribe to this enews</a></div>
<div class="news_read">
<strong>Top News</strong>
</div>
<div class="news_box">
<h6><a href="#">Two FDA Advisory Committees Recommend Approval of Talimogene for Metastatic Melanoma</a></h6>
<label>by <span>Peggy Eastman</span></label>
<p>In a joint meeting, two advisory committees to the Food and Drug Administration recommended approval of the biologic agent talimogene laherparepvec (T-VEC) for injectable regionally or distantly metastatic melanoma. <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
<div class="news_box">
<h6><a href="#">Two New Drugs Promising in Attack of Attractive Targets in CTCL </a></h6>
<label>by <span>Mark Fuerst</span></label>
<p>Drugs now in development show promise in attacking two attractive targets of cutaneous T-cell lymphoma (CTCL). <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
<div class="news_box">
<div class="left_sidebox1">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/images/sidebar-img1.jpg">
</div>
<h6><a href="#">SCLC: Evidence that Maintenance Sunitinib Can Extend Progression-Free Survival in Patients with Extensive Disease </a></h6>
<label>by <span>Kurt Samson</span></label>
<p>The tyrosine kinase inhibitor sunitinib appears to offer a small improvement in progression-free survival in patients receiving chemotherapy for extensive-stage small-cell lung cancer (ES-SCLC). <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/w.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
</div>
<div class="body_left_box">
<div class="left_sidebox2">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img2.jpg">
</div>
<div class="news_read">
<strong>Must Read</strong>
</div>
<div class="news_box">
<h6><a href="#"> Experts Say Here's How to Improve Mammography Interpretation...</a></h6>
<label>by <span>Peggy Eastman</span></label>
<p>Speakers agreed that while the technical quality of mammography has improved since the national Mammography Quality Standards Act (MQSA) of 1992, the interpretation of mammograms remains variable, which limits the detection of early breast cancer. <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
<div class="news_box">
<h6><a href="#">Genome Editing-and Future of the human Species</a></h6>
<label>by <span>George W. Sledge, Jr., MD</span></label>
<p>If you want to see what athe future holds for us, tel me suggest two recent articles... <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
<div class="news_box">
<h6><a href="#">What ASCO's Payment Reform Idea Means to YOU</a></h6>
<label>by <span>Lola Butcher</span></label>
<p>2015 is trying to go down in history as the year of payment reform for cancer care, and ASCOisn't going to miss out of the fun... <a href="#">Read More.</a></p>
<div class="social_link">
<a href="https://www.facebook.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png"></a>
</div>
</div>
</div>
</div>
<div class="body_right">
<div class="subscribe"><a href="#">Subscribe to this enews</a></div>
<div class="sidebox1">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img1.jpg">
</div>
<div class="sidebox2">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img2.jpg" >
</div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<p>Keep receiving Oncology Times eNews by adding editor@oncology-times.info to your address book.<br>
Oncology Times respects your privacy and will not share your information with other companies or organizations without your permission. View our Privacy Policy.</p>
<div class="site_link"><a href="www.oncology-times.com" target="_blank">www.oncology-times.com</a></div>
<span><a href="mailto:ot@lwwny.com">ot@lwwny.com</a></span>
<label>If you do not wish to recieve<br> the Oncology Times enews please <a href="#">unsubscribe</a>.</label>
<div class="footer_logo"><a href="#"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/footer-logo.png" ></a></div>
<div class="copywrite">
<span>333 Seventh Ave., 19th Fl., New York, NY 10001</span>
<label>Copyright ©2015 All Rights Reserved.</label>
</div>
</div>
</div>
</div>
</body>
</html>