Responsywny szablon na eBay tylko w html i css.

0

Witam, otóż mam responsywny szablon na eBay i na podglądzie w przeglądarce działa on poprawnie. Wypycham aukcje eBaya za pomocą programu Baselinker, gdzie na podglądzie również szablon zachowuje się poprawnie. Aukcja na eBayu pokazuje już pasek przewijania poziomego.

Wklejam kod. Co tu może powodować że szablon na eBayu nie zachowuje się responsywnie ? ( link do aukcji rownież podaje: https://www.ebay.de/itm/123783951223 )


```<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="title" content="[nazwa]" />
        <meta name="keywords" content="{{keywords}}" />
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
		<link rel="stylesheet" href="css/default.css" type="text/css" />
        
        <style>

* {
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    list-style: none;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    text-align: center;
}

p {
	font-size: 14px;
	line-height: 24px;
	color: #1e1e1e;
}
img {
	max-width: 100%;
}
.wrapper {
    margin: 0 auto;
    width: 90%;
    max-width: 1024px;
}
.clear {
    clear: both;
}
header,
section,
.store_features ul,
footer {
	width: 100%;
	float: left;
}
header {
	padding: 25px 0;
	background: white;
	text-align: center;
}
header a {
	display: inline-block;
}
.store_features {
	background: white;
}
.gif {
	display: none;
}
.store_features li {
	width: 25%;
	display: table;
	float: left;
}
.store_features li div {
	padding-right: 5%;
	width: 30%;
	height: 80px;
	display: table-cell;
	vertical-align: middle;
	text-align: right;
}
.store_features li span {
	display: table-cell;
	vertical-align: middle;
	font-size: 18px;
	font-weight: 300;
	line-height: 24px;
	color: black;
}
.title {
	padding: 15px 0;
	background: #f3f3f3;
	margin-top: 20px;
}
.title h1 {
	text-align: center;
	font-size: 22px;
	font-weight: 400;
	color: #1e1e1e;
}
.template_content {
	padding-top: 30px;
}
.image_gallery {
    width: 50%;
    background: #FFF;
    text-align: center;
	float: left;
}
/*GALLERY CSS*/
.container {
    width: 100%;
    position: relative;
    margin:0 auto;
}
.thumbnails {
	text-align: center;
    list-style: none;
    font-size: 0;
}
.thumbnails li {
    margin: 15px 15px 0 0;
    width: 90px;
	height: 90px;
	background: #fff;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
	float: left;
}
.thumbnails input[name="select"] {
    display: none;
}
.thumbnails .item-hugger {
	padding: 5px;
	width: 100%;
	height: 100%;
    position: relative;
	display: flex;
    flex-direction: column;
    justify-content: center;
	align-items: center;
	border: 1px solid #e3e3e3;
    transition: all 150ms ease-in-out;
}
.thumbnails label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}
.thumbnails .gallery_content {
	max-width: 540px;
    width: 100%;
    height: 500px;
	background: #fff;
	border: 1px solid #e4e4e4;
    transition: all 150ms linear;
    display: flex;
    flex-direction: column;
    justify-content: center;
	align-items: center;
    overflow: hidden;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 50%;
	transform: translateX(-50%);
}
.thumbnails input[name="select"]:checked + .item-hugger {
    border-color: #a2a2a2;
}
.thumbnails input[name="select"]:checked ~ .gallery_content {
    opacity: 1;
}
.white-box {
    height: 500px;
    overflow: hidden;
}
.template_right {
	width: 48%;
	float: right;
}
.description h2 {
	margin-bottom: 10px;
	padding-bottom: 5px;
	font-weight: 400;
	font-size: 22px;
	color: black;
	display: inline-block;
}
.description ul {
	margin-bottom: 10px;
}
.description ul li {
	list-style-type: disc;
	list-style-position: inside;
	font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #1e1e1e;
}
.accordion {
	margin: 20px 0 30px 0;
}
/* Acordeon styles */
.tab {
	position: relative;
	margin-bottom: 1px;
	width: 100%;
	overflow: hidden;
}
.accordion input {
	position: absolute;
	opacity: 0;
	z-index: -1;
}
.accordion label {
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	background: black;
	font-size: 18px;
	color: #FFF;
	line-height: 45px;
	cursor: pointer;
}
.tab-content {
	max-height: 0;
	overflow-y: auto;
	-webkit-transition: max-height .35s;
	-o-transition: max-height .35s;
	transition: max-height .35s;
}
/* :checked */
.accordion input:checked ~ .tab-content {
	padding: 15px 0;
	max-height: 300px;
}
/* Icon */
.accordion label::after {
	width: 2em;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	font-size: 30px;
	line-height: 45px;
	display: block;
	text-align: center;
	-webkit-transition: all .35s;
	-o-transition: all .35s;
	transition: all .35s;
}
.accordion input[type=radio] + label::after {
  content: "+";
}
.accordion input[type=radio]:checked + label::after {
  content: "-";
}
.common_content {
	padding: 30px 0;
	text-align: center;
}
.common_content h2 {
	margin-bottom: 20px;
	padding-bottom: 5px;
	font-weight: 400;
	font-size: 24px;
	color: #1e1e1e;
	border-bottom: 2px solid #1e1e1e;
	display: inline-block;
}
.common_content p {
	font-size: 15px;
}
.grey {
	background: #f3f3f3;
}
footer {
	padding: 20px 0;
	background: #1e1e1e;
}
footer p {
	line-height: 30px;
	font-weight: 300;
	color: #FFF;
	float: left;
}
footer img {
	float: right;
}
@media only screen and (max-width: 840px) {
	.store_features {
		text-align: center;
	}
	.store_features ul {
		display: none;
	}
	.gif {
		display: inline-block;
	}
	.image_gallery,
	.template_right {
		width: 100%;
	}
	.image_gallery {
		margin-bottom: 20px;
	}
	.thumbnails li,
	footer p,
	footer img {
		float: none;
	}
	.thumbnails .gallery_content,
	.white-box {
		height: 400px;
	}
	footer {
		text-align: center;
	}
}
		</style>
	</head>
	<body>
		<main>
			<header>
				<div class="wrapper">
					<a href="www.ebay.de/GSmarkt_de"><img src="http://damianswitek.prv.pl/shoplogo.png" alt="[nazwa]"/></a>
				</div>
			</header>
			<section class="store_features">
				<div class="wrapper">
					<div class="nav">
					<ul>
						<li>
							<a href="">eBay Shop</a>
						</li>
						<li>
							<a href="">Bewertungsprofil</a>
						</li>
						<li>
							<a href="">Weitere Auktionen</a>
						</li>
						<li>
							<a href="">MichSeite</a>
						</li>
					</ul>
				</div>
					<img src="https://wearephoenixteam.com/ebay/free-templates/images/temp4/gif-img.gif" alt="[nazwa]" class="gif" />
					<div class="clear"></div>
				</div>
			</section>
			<section class="title">
				<div class="wrapper">
					<h1>[nazwa_aukcji]</h1>
					<div class="clear"></div>
				</div>
			</section>
			<section class="template_content">
				<div class="wrapper">
					<div class="image_gallery">
						<div class="container">
							<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="[obrazek]" alt="[nazwa]" />
										<label for="image1"></label>
									</div>
									<div class="gallery_content">
										<img src="[obrazek]" alt="[nazwa]" />
									</div>
								</li>
								<li class="is-active">
									<input type="radio" name="select" id="image2">
									<div class="item-hugger">
										<img class="thumb-image" src="" alt="[nazwa]" />
										<label for="image2"></label>
									</div>
									<div class="gallery_content">
										<img src="" alt="[nazwa]" />
									</div>
								</li>
								<li>
									<input type="radio" name="select" id="image3">
									<div class="item-hugger">
										<img class="thumb-image" src="" alt="[nazwa]" />
										<label for="image3"></label>
									</div>
									<div class="gallery_content">
										<img src="" alt="[nazwa]" />
									</div>
								</li>
								<li>
									<input type="radio" name="select" id="image4">
									<div class="item-hugger">
										<img class="thumb-image" src="" alt="" />
										<label for="image4"></label>
									</div>
									<div class="gallery_content">
										<span>[obrazek]</span>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="template_right">
						<div class="description">
							<h2>Beschreibung</h2>
                                   <div vocab="https://schema.org/" typeof="Product">
                                      <span property="description">
                                        
                                      </span>
                                    </div>
							<p>[opis]</p>
 
                            
							<div class="accordion">
								<div class="tab blue">
									<input id="tab-four" type="radio" name="tabs2" checked>
									<label for="tab-four">Sendung</label>
									<div class="tab-content">
										<p>Opcje wysyłki</p>

									</div>
								</div>
								<div class="tab blue">
									<input id="tab-five" type="radio" name="tabs2">
									<label for="tab-five">Zahlungen</label>
									<div class="tab-content">
										<p>Informację dotyczące płatności</p>

									</div>
								</div>
								<div class="tab blue">
									<input id="tab-six" type="radio" name="tabs2">
									<label for="tab-six">Retouren</label>
									<div class="tab-content">
										<p>Informację dotyczące zwrot&oacute;w</p>

									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
			</section>
			<section class="common_content grey" style=margin-top:15px;>
				<div class="wrapper">
					<h2>FEEDBACK</h2>
					<br>
					<div class="clear"></div>
				</div>
			</section>
			<section class="common_content">
				<div class="wrapper">
					<h2>EXCHANGE</h2>
					<br>
					<div class="clear"></div>
				</div>
			</section>
			<section class="common_content grey">
				<div class="wrapper">
					<h2>CANCELLATION</h2>
					<br>
					<div class="clear"></div>
				</div>
			</section>
			<section class="common_content">
				<div class="wrapper">
					<h2>CONTACT US</h2>
					<br><p>Informację dotyczące kontaktu</p>

					<div class="clear"></div>
				</div>
			</section>
			<footer>
				<div class="wrapper">
<table valign="center" align="center" width="100%"> <tbody><tr><td align="left"><p>Copyright &copy;  | All Rights Reserved</p></td><td align="right"><img src="http://damianswitek.prv.pl/shoplogo.png"> </td></tr></tbody></table>
				</div>
			</footer>
		</main>
	</body>
</html>

0

W Twoim kodzie jest wszystko ok - to eBay dla celów bezpieczeństwa wyświetla opis aukcji w iframe.

0

Tzn jak to dla celów bezpieczeństwa ? eBay miał wytyczne że nie może być aktywnych elementów, więc nie mogłem użyć bootstrapa. Zrobiłem wszystko zgodnie z wytycznymi eBaya, co mam jeszcze zrobić żeby to działało ?

0

Tzn jak to dla celów bezpieczeństwa ?

Takich, że dzięki umieszczaniu opisowi w iframe nie nadpiszesz (przypadkiem bądź nie) faktycznych stylów z eBay'a ;-)

co mam jeszcze zrobić żeby to działało ?

Niestety nie wiem, nie wystawiałem aukcji na eBay'u - wspomniałem jedynie skąd bierze się niedziałająca responsywność.

0

Okej, no trudno trzeba będzie podrążyć temat.

0

Dostałem od eBaya taką oto odpowiedź.

Content width
Content width is wider than viewport width ▾
Viewport width: 375 px, Content width: 525 px
Do not use large fixed width elements.
Content should not rely on a particular viewport width to render well.
Use CSS media queries to apply different styling for small and large screens.

A na stronie ebay expert wyczytałem coś takiego.

Poprzez użycie Media Queries możecie ustawić szerokość strony tak, aby dopasowywała się ona do urządzenia, na którym jest wyświetlana. Nie ustawiajcie więc szerokości na stałe, np. div { width: 600px; }. Zamiast tego korzystajcie z ustawień typu: div { width: 100%; }.

Responsywny szablon na eBay tylko w html i css.

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami