helloo everyone. here i made an html template with table. I need to make it mobile responsive. I want certain td to mobile responsive and collapse down one after another. Please check the html and css file below. I want top image logo, main big image, description on the right, and the tabs collapse down sequentially. not so good with css. If anyone can help please.
HTML CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="http://royalcargroup.co.uk/Ebay/Code/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<center>
<table width="1200" border="0">
<tr>
<td><img src="http://royalcargroup.co.uk/Ebay/Code/TOP2.JPG" width="1200" height="136" /></td>
</tr>
<tr>
<td><img src="http://royalcargroup.co.uk/Ebay/Code/TOP.JPG" width="1200" height="30" /></td>
</tr>
<tr>
<td height="500" valign="top" background=".JPG" ><br>
<center>
<table width="1150" border="0" cellspacing="5" >
<tr>
<td valign="top" width="161">
<div class="template_left_row1">
<table width="100%" border="0">
<tr>
<td>Similar Design </td>
</tr>
<tr>
<td><a href="http://www.ebay.co.uk/itm/282501335473" target="new"><img src="http://royalcargroup.co.uk/Ebay/Code/1.JPG" width="149" height="165" /></a></td>
</tr>
<tr>
<td><a href="http://www.ebay.co.uk/itm/282501335473" target="new"><img src="http://royalcargroup.co.uk/Ebay/Code/1.JPG" width="149" height="165" /></a></td>
</tr>
<tr>
<td><a href="http://www.ebay.co.uk/itm/282501335473" target="new"><img src="http://royalcargroup.co.uk/Ebay/Code/1.JPG" width="149" height="165" /></a></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div> </td>
<td valign="top" width="514">
<div class="gallery_list">
<div class="white-box"></div>
<ul class="thumbnails">
<li>
<input type="radio" name="select" id="image1" checked="">
<div class="item-hugger">
<img class="thumb-image" src="http://royalcargroup.co.uk/Ebay/Code/1.JPG" alt="" />
<label for="image1"></label>
</div>
<div class="content2"><img src="http://royalcargroup.co.uk/Ebay/Code/1.JPG" alt="" /></div>
</li>
<li>
<input type="radio" name="select" id="image2">
<div class="item-hugger">
<img class="thumb-image" src="http://royalcargroup.co.uk/Ebay/Code/2.JPG" alt="" />
<label for="image2"></label>
</div>
<div class="content2"><img src="http://royalcargroup.co.uk/Ebay/Code/2.JPG" alt="" /></div>
</li>
</ul>
</div> <BR></td>
<td align="left" valign="top" width="591">
<div class="template_left_row1">
<center>
<table width="98%" border="0">
<tr>
<td colspan="2">NISSAN BADGED 15" WHEEL TRIM SET OF 4 FITS ANY 15" TRIM (66-WB-15-NI)</td>
</tr>
<tr>
<td width="9%"> </td>
<td width="91%" valign="top"><p>Product Description :</p>
<ul>
<li>Set of 4 High Quality 15 INCH NISSAN Badged Wheel Trim Hub Caps. Improve the Look of Your Car With these Black & White Wheel Trims. </li>
</ul></td>
</tr>
<tr>
<td> </td>
<td valign="top"><p>Key Features : </p>
<ul>
<li>Made of High Durable ABS Plastic</li>
<li>Tough Lacquer Finish </li>
<li>Durable and Rust Proof </li>
<li>Easy Installation without any Drilling </li>
<li>Metal Retaining for Secure Fitting</li>
</ul></td>
</tr>
<tr>
<td> </td>
<td valign="top"><p>Package Includes : </p>
<ul>
<li>4 x Wheel Trim Hub Cap</li>
<li>4 x Metal Ring</li>
<li>8 x Cable Ties</li>
<li>NISSAN Badge</li>
</ul></td>
</tr>
<tr>
<td> </td>
<td valign="top"><p>Important Notes : </p>
<ul>
<li>Before buying please make sure you order the right size. Please check the Rim Diameter of your Tyre Which Mark as R13, R14, R15 or R16.</li>
</ul></td>
</tr>
</table>
</center>
</div> </td>
</tr>
<tr>
<td valign="top"> </td>
<td colspan="2" valign="top"></td>
</tr>
<tr>
<td valign="top"><img src="http://royalcargroup.co.uk/Ebay/Code/paypal.JPG" width="149" height="100" /></td>
<td colspan="2" valign="top">
<div class="tab_container">
<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">SHIPPING</label>
<div class="tab">
<ul>
<li>Items are dispatched within 1 working day of cleared payment.</li>
<li>All BT and AB postcodes, DD8-11, GY1-99, HS1-99, IV1-23, IV25-27, IV30-32, IV36, IV40-56, JE1-99, KA27-28, KW1-3, KW5-17
PA20-49, PA60-78, PH19-26, PH30-44, PH49-50, ZE1-99 & Scottish Highlands, Ireland and Northern Ireland.</li>
</ul>
</div>
<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">PAYMENT</label>
<div class="tab">
<ul>
<li>We accept PayPal payment Only.</li>
<li>A non-payment dispute will be opened if full payment is not received after 14 days.</li>
<li>Once checkout is complete, you will not be able to include any additional items.</li>
<li>We start to process and fulfill your order once payment is complete.</li>
<li>Please make sure to include the correct Ship-To address. We are not responsible for any wrong or undeliverable addresses.</li>
</ul>
</div>
<input type="radio" name="tabs" id="tabthree">
<label for="tabthree">RETURN</label>
<div class="tab">
<ul>
<li>Customer have a maximum of 30 calendar days from the day after the item is received to organise a return or exchange. Customers then have an additional 14 calendar days to actually return it to us.</li>
<li>Customers must return an item /items in the same condition as it was received enclosing the relevant items from the following list, also in original condition : All packaging such as boxes, bags, and polystyrene, Accessories such as brackets and fixings, Manuals and warranty documents.</li>
</ul>
</div>
<input type="radio" name="tabs" id="tabfour">
<label for="tabfour">EXCHANGE</label>
<div class="tab">
<ul>
<li>We are happy to exchange any faulty or damaged product</li>
<li>Please Contact Us before leaving any negetive feedback</li>
</ul>
</div>
<input type="radio" name="tabs" id="tabfive">
<label for="tabfive">CONTACT</label>
<div class="tab">
<ul>
<li>Please check seller information to contact.</li>
</ul>
</div>
<input type="radio" name="tabs" id="tabsix">
<label for="tabsix">FEEDBACK</label>
<div class="tab">
<ul>
<li>Please leave us a feedback if you are happy with the product and service</li>
<li>If you are not happy or satisfied with our product and service please call us before leaving any negetive feedback. We are ready to make our customers' delight</li>
</ul>
</div>
</div>
</div> </td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top"> </td>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top" width="161"> </td>
<td valign="top" width="514"> </td>
<td valign="top" width="591"> </td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</center>
</body>
</html>
CSS CODE:
.template_left_row1 {
border: 1px solid #e8e8e8;
}
/*gallery*/
.gallery_list {
width: 98%;
position: relative;
margin:0 auto;
}
.thumbnails {
list-style: none;
font-size: 0;
}
.thumbnails li {
display: inline-block;
margin: 15px 10px 0 0;
width: 90px;
height: 90px;
text-align: center;
vertical-align: middle;
float: left;
}
.thumbnails li:hover .item-hugger {
background: white;
}
.thumbnails input[name="select"] {
display: none;
}
.thumbnails .item-hugger {
height: 100%;
position: relative;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-webkit-transition: all 150ms ease-in-out;
border:solid 1px #e8e8e8;
z-index: 999;
padding: 4px;
}
.thumbnails label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.thumbnails .thumb-image,.thumbnails .content2 img {
align-self: center;
max-height: 100%;
}
.thumbnails .content2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 478px;
padding: 5px;
opacity: 0;
transition: all 150ms linear;
display: flex;
background: #FFF;
border:solid 1px #e8e8e8;
flex-direction: column;
justify-content: center;
overflow: hidden;
align-self: center;
}
.thumbnails input[name="select"]:checked + .item-hugger {
background: white;
border: solid 1px #0062b0;
}
.thumbnails input[name="select"]:checked ~ .content2 {
opacity: 1;
}
.white-box {
height: 478px;
overflow: hidden;
}
/* CSS TAB */
.tab_container {
width: 100%;
background: #f1f1f1;
position: relative;
float: left;
}
.tab_container:before {
width: 100%;
height: 46px;
background: #FFF;
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
}
.tabs {
display: flex;
flex-wrap: wrap;
width: 100%;
float: left;
}
.tabs label {
padding: 10px;
width: 14.285%;
background: #00aeef;
border: 1px solid #FFF;
order: 1;
display: block;
cursor: pointer;
text-align: center;
font-size: 16px;
font-weight: 400;
line-height: 25px;
color: #FFF;
position: relative;
z-index: 1;
}
.tabs .tab {
order: 99;
flex-grow: 1;
width: 100%;
max-height: 0;
visibility: hidden;
text-align: left;
margin-top: -1px;
overflow-y: hidden;
display: none;
}
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked + label {
background: #ed5829;
}
.tabs input[type="radio"]:checked + label + .tab {
padding: 20px 0;
visibility: visible;
display: block;
max-height: none;
}
.tabs .tab ul {
margin-bottom: 10px;
}
.tabs .tab ul li{
list-style-type: disc;
list-style-position: inside;
font-size: 14px;
line-height: 28px;
font-weight: normal;
color: #6e6e6e;
}
.tabs .tab p{
font-size: 14px;
line-height: 28px;
font-weight: normal;
color: #6e6e6e;
margin-bottom: 8px;
}
@media only screen and (max-width: 980px) {
.template .header {
padding-bottom: 10px;
}
.logo {
margin-top: 0;
display: inline-block;
float: none;
}
.head_right {
width: 100%;
}
.head_right ul,
.head_right ul li {
float: none;
}
.template_left {
display: none;
}
.template_right {
width: 100%;
}
.tab_container {
padding-bottom: 20px;
background: none;
}
.tab_container:before {
display: none;
}
.tabs .tab,
.tabs label {
order: initial;
transition: 300ms all;
display: block;
}
.tabs label {
width: 100%;
margin-right: 0;
margin-top: 0.2rem;
}
.tabs input[type="radio"]:checked + label {
background: #ed5829;
border: none;
}
.tabs input[type="radio"]:checked + label + .tab {
padding: 20px;
max-height: 400px;
overflow-y: scroll;
background: #f1f1f1;
border: 1px solid #e1e1e1;
}
}
I appreciate your help. thanks