Hoe maak je een Tabel responsive?
Ik zit met een probleempje en hoop dat jullie me hiermee kunnen hebben.
Zoals u kunt zien op abcwinkel.nl staan onderaan de homepagina netjes 3 filmpjes naast elkaar met de prijs eronder en stop in winkelwagen knop etc..
Deze heb ik met een <table><td> gemaakt.
Als je nu op mobiel kijkt, staan ze nog steeds naast elkaar.
Hoe zorg ik dat ze op mobiel onder elkaar worden weergeven?
Dit is de tabel die ik tot nu toe heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<table>
<tbody>
<tr>
<td><iframe src="https://www.youtube.com/embed/tF6JZSTw9DY" height="172" width="274"></iframe>
<h2 class="product-name" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-size: 14px; font-weight: normal; color: #636363; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-style: normal; line-height: 1.4; text-rendering: optimizeLegibility; text-transform: uppercase; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><a style="box-sizing: border-box; margin: 0px; padding: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; outline: #3091c2 0px; font-weight: 500;" title="Bergner Roestvrijstalen asperge-/ pastapan met deksel (4,2 l.)" href="http://www.abcwinkel.nl/bergner-roestvrijstalen-asperge-pastapan-met-deksel-4-2-l.html"> ROESTVRIJSTALEN ASPERGE/ PASTAPAN MET DEKSEL (4,2 L.)</a></h2>
<div class="price-box" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #a0a0a0; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span id="product-price-3295" class="regular-price" style="box-sizing: border-box; margin: 0px; padding: 0px;"> <span class="price" style="box-sizing: border-box; margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #3399cc; font-size: 16px;"> € 29,95</span></span></div>
<p><button class="button btn-cart" style="box-sizing: border-box; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-size: 13px; line-height: 19px; -webkit-appearance: button; cursor: pointer; touch-action: manipulation; color: #ffffff; display: inline-block; font-weight: normal; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: normal; border: 0px none; margin: 0px; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; background: #3399cc;" title="In winkelwagen" onclick="setLocation('http://www.abcwinkel.nl/checkout/cart/add/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9cGFzdGFwYW4,/product/3295/form_key/dtn2GQoibtptrxjQ/')" type="button"> <span style="box-sizing: border-box; margin: 0px; padding: 0px;">IN WINKELWAGEN</span></button></p>
<ul class="add-to-links" style="box-sizing: border-box; margin: 7px 0px 0px; padding: 0px; list-style: none;">
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-wishlist" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/wishlist/index/add/product/3295/form_key/dtn2GQoibtptrxjQ/"> Zet op verlanglijst</a></p>
</li>
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-compare" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/catalog/product_compare/add/product/3295/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9cGFzdGFwYW4,/form_key/dtn2GQoibtptrxjQ/"> Voeg toe aan productvergelijking</a></p>
</li>
</ul>
<p> </p>
</td>
<td><iframe src="https://www.youtube.com/embed/VwkD7zsAIV8" height="172" width="273"></iframe>
<h2 class="product-name" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-size: 14px; font-weight: normal; color: #636363; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-style: normal; line-height: 1.4; text-rendering: optimizeLegibility; text-transform: uppercase; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><a style="box-sizing: border-box; margin: 0px; padding: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; font-weight: 500;" title="Renberg Roestvrijstalen theepot met filter (1,1 liter)" href="http://www.abcwinkel.nl/renberg-roestvrijstalen-theepot-met-filter-1-1-liter.html"> RENBERG ROESTVRIJSTALEN THEEPOT MET FILTER (1,1 LITER)</a></h2>
<div class="price-box" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #a0a0a0; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span id="product-price-3325" class="regular-price" style="box-sizing: border-box; margin: 0px; padding: 0px;"> <span class="price" style="box-sizing: border-box; margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #3399cc; font-size: 16px;"> € 9,95</span></span></div>
<p><button class="button btn-cart" style="box-sizing: border-box; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-size: 13px; line-height: 19px; -webkit-appearance: button; cursor: pointer; touch-action: manipulation; color: #ffffff; display: inline-block; font-weight: normal; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: normal; border: 0px none; margin: 0px; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; background: #3399cc;" title="In winkelwagen" onclick="setLocation('http://www.abcwinkel.nl/checkout/cart/add/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9dGhlZXBvdA,,/product/3325/form_key/dtn2GQoibtptrxjQ/')" type="button"> <span style="box-sizing: border-box; margin: 0px; padding: 0px;">IN WINKELWAGEN</span></button></p>
<ul class="add-to-links" style="box-sizing: border-box; margin: 7px 0px 0px; padding: 0px; list-style: none;">
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-wishlist" style="box-sizing: border-box; margin: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; outline: #3091c2 0px; display: inline-block; padding-left: 3px; padding-right: 3px; padding-top: 0px; padding-bottom: 3px;" href="http://www.abcwinkel.nl/wishlist/index/add/product/3325/form_key/dtn2GQoibtptrxjQ/"> Zet op verlanglijst</a></p>
</li>
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-compare" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/catalog/product_compare/add/product/3325/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9dGhlZXBvdA,,/form_key/dtn2GQoibtptrxjQ/"> Voeg toe aan productvergelijking</a></p>
</li>
</ul>
<p> </p>
</td>
<td><iframe src="https://www.youtube.com/embed/dtqb2I3qeaI" height="172" width="280"></iframe>
<h2 class="product-name" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-size: 14px; font-weight: normal; color: #3399cc; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-style: normal; line-height: 1.4; text-rendering: optimizeLegibility; text-transform: uppercase; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><a style="box-sizing: border-box; margin: 0px; padding: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; font-weight: 500;" title="Déluxa Luxe sieradenbox met spiegel (30,5x19,5x20)" href="http://www.abcwinkel.nl/deluxa-luxe-sieradenbox-met-spiegel-30-5x19-5x20.html"> DÉLUXA LUXE SIERADENBOX MET SPIEGEL (30,5X19,5X20)</a></h2>
<div class="price-box" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #a0a0a0; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span id="product-price-3176" class="regular-price" style="box-sizing: border-box; margin: 0px; padding: 0px;"> <span class="price" style="box-sizing: border-box; margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #3399cc; font-size: 16px;"> € 32,95</span></span></div>
<p><button class="button btn-cart" style="box-sizing: border-box; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-size: 13px; line-height: 19px; -webkit-appearance: button; cursor: pointer; touch-action: manipulation; color: #ffffff; display: inline-block; font-weight: normal; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: normal; border: 0px none; margin: 0px; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; background: #3399cc;" title="In winkelwagen" onclick="setLocation('http://www.abcwinkel.nl/checkout/cart/add/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9c2llcmFkZW4,/product/3176/form_key/dtn2GQoibtptrxjQ/')" type="button"> <span style="box-sizing: border-box; margin: 0px; padding: 0px;">IN WINKELWAGEN</span></button></p>
<ul class="add-to-links" style="box-sizing: border-box; margin: 7px 0px 0px; padding: 0px; list-style: none;">
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-wishlist" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/wishlist/index/add/product/3176/form_key/dtn2GQoibtptrxjQ/"> Zet op verlanglijst</a></p>
</li>
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-compare" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/catalog/product_compare/add/product/3176/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9c2llcmFkZW4,/form_key/dtn2GQoibtptrxjQ/"> Voeg toe aan productvergelijking</a></p>
</li>
</ul>
<p> </p>
</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td><iframe src="https://www.youtube.com/embed/tF6JZSTw9DY" height="172" width="274"></iframe>
<h2 class="product-name" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-size: 14px; font-weight: normal; color: #636363; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-style: normal; line-height: 1.4; text-rendering: optimizeLegibility; text-transform: uppercase; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><a style="box-sizing: border-box; margin: 0px; padding: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; outline: #3091c2 0px; font-weight: 500;" title="Bergner Roestvrijstalen asperge-/ pastapan met deksel (4,2 l.)" href="http://www.abcwinkel.nl/bergner-roestvrijstalen-asperge-pastapan-met-deksel-4-2-l.html"> ROESTVRIJSTALEN ASPERGE/ PASTAPAN MET DEKSEL (4,2 L.)</a></h2>
<div class="price-box" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #a0a0a0; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span id="product-price-3295" class="regular-price" style="box-sizing: border-box; margin: 0px; padding: 0px;"> <span class="price" style="box-sizing: border-box; margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #3399cc; font-size: 16px;"> € 29,95</span></span></div>
<p><button class="button btn-cart" style="box-sizing: border-box; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-size: 13px; line-height: 19px; -webkit-appearance: button; cursor: pointer; touch-action: manipulation; color: #ffffff; display: inline-block; font-weight: normal; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: normal; border: 0px none; margin: 0px; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; background: #3399cc;" title="In winkelwagen" onclick="setLocation('http://www.abcwinkel.nl/checkout/cart/add/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9cGFzdGFwYW4,/product/3295/form_key/dtn2GQoibtptrxjQ/')" type="button"> <span style="box-sizing: border-box; margin: 0px; padding: 0px;">IN WINKELWAGEN</span></button></p>
<ul class="add-to-links" style="box-sizing: border-box; margin: 7px 0px 0px; padding: 0px; list-style: none;">
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-wishlist" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/wishlist/index/add/product/3295/form_key/dtn2GQoibtptrxjQ/"> Zet op verlanglijst</a></p>
</li>
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-compare" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/catalog/product_compare/add/product/3295/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9cGFzdGFwYW4,/form_key/dtn2GQoibtptrxjQ/"> Voeg toe aan productvergelijking</a></p>
</li>
</ul>
<p> </p>
</td>
<td><iframe src="https://www.youtube.com/embed/VwkD7zsAIV8" height="172" width="273"></iframe>
<h2 class="product-name" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-size: 14px; font-weight: normal; color: #636363; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-style: normal; line-height: 1.4; text-rendering: optimizeLegibility; text-transform: uppercase; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><a style="box-sizing: border-box; margin: 0px; padding: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; font-weight: 500;" title="Renberg Roestvrijstalen theepot met filter (1,1 liter)" href="http://www.abcwinkel.nl/renberg-roestvrijstalen-theepot-met-filter-1-1-liter.html"> RENBERG ROESTVRIJSTALEN THEEPOT MET FILTER (1,1 LITER)</a></h2>
<div class="price-box" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #a0a0a0; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span id="product-price-3325" class="regular-price" style="box-sizing: border-box; margin: 0px; padding: 0px;"> <span class="price" style="box-sizing: border-box; margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #3399cc; font-size: 16px;"> € 9,95</span></span></div>
<p><button class="button btn-cart" style="box-sizing: border-box; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-size: 13px; line-height: 19px; -webkit-appearance: button; cursor: pointer; touch-action: manipulation; color: #ffffff; display: inline-block; font-weight: normal; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: normal; border: 0px none; margin: 0px; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; background: #3399cc;" title="In winkelwagen" onclick="setLocation('http://www.abcwinkel.nl/checkout/cart/add/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9dGhlZXBvdA,,/product/3325/form_key/dtn2GQoibtptrxjQ/')" type="button"> <span style="box-sizing: border-box; margin: 0px; padding: 0px;">IN WINKELWAGEN</span></button></p>
<ul class="add-to-links" style="box-sizing: border-box; margin: 7px 0px 0px; padding: 0px; list-style: none;">
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-wishlist" style="box-sizing: border-box; margin: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; outline: #3091c2 0px; display: inline-block; padding-left: 3px; padding-right: 3px; padding-top: 0px; padding-bottom: 3px;" href="http://www.abcwinkel.nl/wishlist/index/add/product/3325/form_key/dtn2GQoibtptrxjQ/"> Zet op verlanglijst</a></p>
</li>
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-compare" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/catalog/product_compare/add/product/3325/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9dGhlZXBvdA,,/form_key/dtn2GQoibtptrxjQ/"> Voeg toe aan productvergelijking</a></p>
</li>
</ul>
<p> </p>
</td>
<td><iframe src="https://www.youtube.com/embed/dtqb2I3qeaI" height="172" width="280"></iframe>
<h2 class="product-name" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-size: 14px; font-weight: normal; color: #3399cc; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-style: normal; line-height: 1.4; text-rendering: optimizeLegibility; text-transform: uppercase; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><a style="box-sizing: border-box; margin: 0px; padding: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; font-weight: 500;" title="Déluxa Luxe sieradenbox met spiegel (30,5x19,5x20)" href="http://www.abcwinkel.nl/deluxa-luxe-sieradenbox-met-spiegel-30-5x19-5x20.html"> DÉLUXA LUXE SIERADENBOX MET SPIEGEL (30,5X19,5X20)</a></h2>
<div class="price-box" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #a0a0a0; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span id="product-price-3176" class="regular-price" style="box-sizing: border-box; margin: 0px; padding: 0px;"> <span class="price" style="box-sizing: border-box; margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #3399cc; font-size: 16px;"> € 32,95</span></span></div>
<p><button class="button btn-cart" style="box-sizing: border-box; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-size: 13px; line-height: 19px; -webkit-appearance: button; cursor: pointer; touch-action: manipulation; color: #ffffff; display: inline-block; font-weight: normal; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: normal; border: 0px none; margin: 0px; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; background: #3399cc;" title="In winkelwagen" onclick="setLocation('http://www.abcwinkel.nl/checkout/cart/add/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9c2llcmFkZW4,/product/3176/form_key/dtn2GQoibtptrxjQ/')" type="button"> <span style="box-sizing: border-box; margin: 0px; padding: 0px;">IN WINKELWAGEN</span></button></p>
<ul class="add-to-links" style="box-sizing: border-box; margin: 7px 0px 0px; padding: 0px; list-style: none;">
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-wishlist" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/wishlist/index/add/product/3176/form_key/dtn2GQoibtptrxjQ/"> Zet op verlanglijst</a></p>
</li>
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-compare" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/catalog/product_compare/add/product/3176/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9c2llcmFkZW4,/form_key/dtn2GQoibtptrxjQ/"> Voeg toe aan productvergelijking</a></p>
</li>
</ul>
<p> </p>
</td>
</tr>
</tbody>
</table>
Sorry voor de rommelige code.
ik zou de video's in div'jes doen en dan een float gebruiken in de browserpagina, als je gebruik maakt van media queries in je css file kun je bij het responsive gedeelte de float op none zetten het zou dan moeten werken denk ik.
Aan de rest van css durf ik niet aan te zitten.
Edit:
Ik zie nu dat je de 3 filmpjes onder elkaar wilt hebben voor mobiel.
Als je niet in de magento css files wilt werken kan je altijd zelf nog een css file toevoegen met je eigen classes, en die aan de tabel toekennen.
Gewijzigd op 14/02/2016 17:13:33 door Randy vsf
Met welke code kan ik hem dan alsnog responsive maken?
Kijk eens op jqueryrain.com, daar staat vast wel een plugin hiervoor.
Waarom gebruik je niet gewoon bootstrap?
Met screen.width en screen.height krijg je de huidige resolutie van het scherm. Van daaruit kan je bepalen wat je doet.
Maar wat is de reden dat je niet wat classes in de CSS file erbij zet?
Gewijzigd op 19/02/2016 09:52:56 door Randy vsf