Responsive table problem

wakingland
Excursionist
15 0 2

Hello , I am trying to make this table responsive so i can improve it's view on mobile.

It is a table that is displaying videos on from youtube. Can someone please point me to the right way of doing it.

Store address page is: https://wakingland.com/pages/providers

The code is:

<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 25%;">
<div><meta charset="utf-8" /></div>
<h3>ART &amp; CULTURE  </h3>
<p><iframe width="480" height="480" src="https://www.youtube.com/embed/lhHQqZusXlc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
</td>
<td style="width: 25%;">
<div><meta charset="utf-8" /></div>
<h3>DSOAP ATELIER</h3>
<p><iframe width="480" height="480" src="https://www.youtube.com/embed/AlyXSthW1Zk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
</td>
<td style="width: 25%;">
<div><meta charset="utf-8" /></div>
<h3>BODY TRUTH</h3>
<p><iframe width="480" height="480" src="https://www.youtube.com/embed/jft2ZS8ghJw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
</td>
<td style="width: 25%;">
<div><meta charset="utf-8" /></div>
<h3>Jules &amp; Nomad</h3>
<p><iframe width="480" height="480" src="https://www.youtube.com/embed/zvVKnqZGEss" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
</td>
</tr>
<tr>
<td style="width: 25%;">
<h3> THE ECO LOOP</h3>
<div style="text-align: start;"></div>
<p><iframe width="480" height="480" src="https://www.youtube.com/embed/7HiWs-Dj0k4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
</td>
<td style="width: 25%;">
<div><meta charset="utf-8" /></div>
<h3>ONYA</h3>
<p><iframe width="480" height="480" src="https://www.youtube.com/embed/yP0EKaknr_4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
</td>
<td style="width: 25%;">
<div><meta charset="utf-8" /></div>
<h3>SUPERBEE</h3>
<p><iframe width="480" height="480" src="https://www.youtube.com/embed/z2sl_UzSv0w" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
</td>
<td style="width: 25%;">
<div><meta charset="utf-8" /></div>
<h3>Ayuray</h3>
<p><iframe width="480" height="480" src="https://www.youtube.com/embed/2WgZ3i1Yp10" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
</td>
</tr>
<tr>
<td style="width: 25%;">
<h3>Veggitech</h3>
<div style="text-align: start;"></div>
<p><iframe width="480" height="480" src="https://www.youtube.com/embed/QtHuj4h1jVM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
</td>
<td style="width: 25%;">
<div><meta charset="utf-8" /></div>
<h3>La Jeanette Organics</h3>
<p><iframe width="480" height="480" src="https://www.youtube.com/embed/gWz37H21YPw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
</td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
</tbody>
</table>

0 Likes
Wahab_Ahmad
Shopify Partner
696 110 162

Hello @wakingland,

           I have visited the page. I think, there is only one solution. Kindly make two different tables for desktop and mobile view. The present table is good for Desktop, You can hide table using media query in mobile view and design another table that will be good for mobile view, hide mobile view table on Desktop View. 

I think you will understand this question. If you want to do a discussion, Tag me on the Shopify dicussion board.

Regards,

Wahab Ahmad

wahabahmadghori@gmail.com

0 Likes
wakingland
Excursionist
15 0 2

hello

0 Likes