Ok so I have been working on a small project for a friend of mine that needed a HTML5 template for his Ebay account. Ebay are introducing new rules that means you cannot have certain content such as Javascript and Forms in the description. For some reason when I use http://www.i-ways.net/mobile-friendly/en-uk/ to check it is mobile responsive it says its not and it also tells me I have JavaScript in my code, which I do not have. Can anyone suggest better approaches please?
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
<style>
body {
background-color: #f1f1f1;
}
.wrapper {
margin: 0 auto;
padding: 0 20px 20px 20px;
max-width: 1080px;
min-width: 200px;
background-color: #ffffff;
height: 100%;
}
.header {
width: 100%;
height: 100px;
}
.header-right {
float: right;
height: 15px;
padding: 24px 40px 20px 5px;
margin-bottom: 30px;
}
.logo {
float: left;
display: block;
max-width: 100%;
max-height: 100%;
border: 0;
}
.call-us {
padding-right: 20px;
max-width: 100%;
}
.cartImg {
max-width: 40px;
max-height: 40px;
}
/*MEDIA QUERY at 676 to 808px*/
@media (min-width: 676px) and (max-width: 808px) {
.logo {
float: left;
display: block;
max-width: 100%;
margin-left: 25%;
border: 0;
}
}
@media (min-width: 676px) and (max-width: 808px) {
.call-us {
float: left;
display: block;
margin-right: 25%;
max-width: 100%;
}
}
@media (min-width: 676px) and (max-width: 808px) {
.cartImg {
float: left;
margin-left: 25%;
margin-top: 10px;
}
}
/*MEDIA QUERY at 330 to 456px*/
@media (min-width: 330px) and (max-width: 456px) {
.call-us {
float: left;
display: block;
margin-left: 45px;
max-width: 100%;
}
}
@media (min-width: 330px) and (max-width: 456px) {
.cartImg {
float: left;
margin-left: 50%;
margin-top: 10px;
}
}
/*MEDIA QUERY at 279 to 330px*/
@media (min-width: 279px) and (max-width: 330px) {
.call-us {
float: left;
display: block;
margin-left: 20px;
max-width: 100%;
}
}
@media (min-width: 279px) and (max-width: 330px) {
.cartImg {
float: left;
margin-left: 50%;
margin-top: 10px;
}
}
.main {
width: 100%;
font-family: Segoe UI, Arial;
}
p {
font-family: Segoe UI, Arial;
font-size: 16px;
}
h1 {
text-transform: uppercase;
font-family: Segoe UI, Arial;
font-weight: bold;
letter-spacing: -0.5px;
clear: both;
text-align: center;
}
.styleBottomRed {
height: 40px;
line-height: 40px;
padding: 0 10px;
color: #FFFFFF;
text-transform: uppercase;
font-family: Segoe UI, Arial;
font-weight: bold;
letter-spacing: -0.5px;
background-color: #204393;
border-left: 2px solid white;
text-align: center;
}
.tab_content_main {
padding: 0 15px;
background-color: #F1F1F1;
}
.prod-img {
max-width: 100%;
max-height: 100%;
}
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
line-height: 0;
clear: both;
border: none;
}
.bottomTabs {
font-size: 20px;
font-family: Segoe UI, Arial;
font-weight: bold;
height: 40px;
max-height: 50px;
text-align: center;
color: white;
background-color: #204393;
}
#iconImg {
float: right;
max-width: 40px;
max-height: 40px;
}
.bottomTabsUL, ul, li {
list-style-type: square;
font-size: 16px;
}
/*MEDIA QUERY at 866 to 2000px hide different content and show other*/
@media screen and (min-width: 866px) and (max-width: 2000px) {
.bottomTabs { display: none; } /* hide it elsewhere */
}
@media screen and (min-width: 866px) and (max-width: 2000px) {
.bottomTabsUL, { display: none; } /* hide it elsewhere */
}
@media screen and (min-width: 866px) and (max-width: 2000px) {
.tdMobile { display: none; } /* hide it elsewhere */
}
@media screen and (min-width: 0px) and (max-width: 866px) {
section { display: none; } /* hide it elsewhere */
}
/*TAB CSS*/
* {
box-sizing: border-box;
}
section {
position: relative;
width: 100%;
margin: 0 auto;
z-index: 0;
color: white;
}
section:after {
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.';
position: absolute;
left: 0;
top: 45px;
font-size: 16px;
text-align: left;
background-color: #F1F1F1;
padding: 8px 20px 20px 20px;
max-width: 100%;
min-width: 200px;
min-height: 125px;
color: black;
}
button {
cursor: pointer;
width: 199px;
display: inline-block;
background-color: #204393;
color: white;
text-align: center;
transition: .25s ease;
border: none;
padding: 10px;
font-size: 18px;
margin-bottom: 145px;
}
.divTab:focus button, button:focus {
background-color: #EE2725;
outline: none;
font-size: 18px;
}
.tabP {
display: none;
font-size: 16px;
padding: 20px 20px 20px 20px;
}
button:focus + .tabP, .divTab:focus P {
display: block;
position: absolute;
background-color: #F1F1F1;
width: 100%;
min-width: 200px;
min-height: 150px;
left: 0;
color: black;
z-index: 2;
outline: none;
top: 29px;
text-align: left;
padding-top: 8px;
}
.divTab {
display: inline-block;
}
.divTab:focus {
outline: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<a href="http://stores.ebay.co.uk/" target="_blank"><img class="logo" title="shopname" src="https://EXAMPLE.gif"/></a>
<div class="header-right">
<a href="tel:0800000000"><img class="call-us" alt="Call Us" title="Call Us" src="https://EXAMPLE.gif"/></a>
<a href="http://stores.ebay.co.uk/" target="_blank"><img class="cartImg" alt="Cart Image" title="CartImg" src="https://EXAMPLE.png" /></a>
</div>
</div>
<hr>
<div class="main">
<hr>
<h1>{{ title }}</h1>
<hr>
<center><img class="prod-img" src="{{ images[0].url }}" width="500px" /></center>
<hr>
<p>{{ description }}</p>
<br>
<!--Footer tabs for selecting payment, delivery, returns and warranty.-->
<section>
<div class="divTab">
<button>Payment</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
<div class="divTab">
<button>Delivery</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
<div class="divTab">
<button>Returns</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
<div class="divTab">
<button>Warranty</button>
<p class="tabP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</div>
</section>
<!--Footer tabs for Mobile application compatibility. selecting payment, delivery, returns and warranty.-->
<table style="width:100%; text-align:center;">
<tr>
<td class="bottomTabs">Payment</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</td>
</tr>
<tr>
<td class="bottomTabs">Delivery</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
<ul class="bottomTabsUL">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</li>
</ul>
</td>
</tr>
<tr>
<td class="bottomTabs">Returns</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</tr>
<tr>
<td class="bottomTabs">Warranty</td>
</tr>
<tr>
<td class="tdMobile" style="text-align: left;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum pulvinar ultricies. Phasellus neque est, bibendum vel dui sit amet, fringilla mollis mauris. Integer ut ligula fringilla, dictum mauris eget, feugiat ipsum. Nullam at gravida odio.</p>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
These double curly brackets will make iways think it is javascript..
Delete / Amend the Following from your code.
{{ title }}
{{ images[0].url }}
{{ description }}