Make table responsive

[Wladi]

Hey guys maybe someone knows the problem. I sell through Printful and there is a size guide. When I import the table into my shop, it is correctly displayed on the desktop but cut off on the mobile phone. Look at the picture. How do I make the table appear on the phone in full size?

[KetanKumar]

Hello, @Wladi 

Thanks for Post.

Please share your site URL,
So I will check and provide a solution here.

[Wladi]

Thank you. Heavyfit.de (wladwlad)

[Wladi]

Here is the HTML-Code maybe it helps.

<div class="table-responsive dynamic" data-unit-system="metric">
<table cellpadding="5" style="width: 186px; margin-left: auto; margin-right: auto;" height="101">
<tbody>
<tr style="height: 19px;">
<td style="width: 40px; height: 19px;"> </td>
<td style="width: 18px; height: 19px;"><strong>XS</strong></td>
<td style="width: 16px; height: 19px;"><strong>S</strong></td>
<td style="width: 16px; height: 19px;"><strong>M</strong></td>
<td style="width: 16px; height: 19px;"><strong>L</strong></td>
<td style="width: 17px; height: 19px;"><strong>XL</strong></td>
<td style="width: 10px; height: 19px;"><strong>2XL</strong></td>
</tr>
<tr style="height: 15px;">
<td style="width: 40px; height: 15px;"><strong>Länge (cm)</strong></td>
<td style="width: 18px; height: 15px;">69</td>
<td style="width: 16px; height: 15px;">71</td>
<td style="width: 16px; height: 15px;">74</td>
<td style="width: 16px; height: 15px;">76</td>
<td style="width: 17px; height: 15px;">79</td>
<td style="width: 10px; height: 15px;">81</td>
</tr>
<tr style="height: 38px;">
<td style="width: 40px; height: 38px;"><strong>Breite (cm)</strong></td>
<td style="width: 18px; height: 38px;">42</td>
<td style="width: 16px; height: 38px;">46</td>
<td style="width: 16px; height: 38px;">51</td>
<td style="width: 16px; height: 38px;">56</td>
<td style="width: 17px; height: 38px;">61</td>
<td style="width: 10px; height: 38px;">66</td>
</tr>
</tbody>
</table>
</div>

[KetanKumar]

@Wladi 

Thanks for it.

sorry for that your store is password protected can you please share us.

[Wladi]

Yes of course password is wladwlad

---

@KetanKumar wrote:

@Wladi 

Thanks for it.

sorry for that your store is password protected can you please share us.

---

[KetanKumar · Accepted solution]

@Wladi 

Thanks for URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste bellow code at the bottom of the file.

@media screen and (max-width: 767px) {
.product-details-wrapper {
    padding: 20px 5px;
}
.table-responsive th, .table-responsive td {
padding: 8px;
}
}

if you have any issue let me know i can help you.

[Wladi]

Thank you very much it works (:

[Vnsa]

Hi - I'm trying to fix the same problem, make tables responsive for mobile but we have Mr Parker theme and there isn't a timber.ccs 

here's the visual of the issue - on desktop we have a table with 2 images side by side

on the mobile it only shows 1 image and the edge of the 2nd

site is www.lindseybrown.com

hope you can help !

[KetanKumar]

@Vnsa 

Thanks for post 

i have check this issue but sorry i can't see any table on product page can you please share product URL if you have any table formate code

[Vnsa]

Thanks for replying to my query @KetanKumar 

it's actually a page - not product page 

https://www.lindseybrown.com/pages/beautiful-silk-maxi-dress

I was wondering if i should create a different page template rather than change the ccs for all tables?

[KetanKumar]

@Vnsa 

Thanks 

it's not image code that's iframe so can you please change your code many inline CSS doesn't properly work on mobile 

[Vnsa]

Ah I see - the images are embedded directly from instagram so I have copied the embed code directly 

Here's part of the code (I've taken out the a href details) - looking at it now, is it the width 100% that's the issue?

<div style="padding: 16px;"><a href=XXX" style="background: #FFFFFF; line-height: 0; padding: 0 0; text-align: center; text-decoration: none; width: 100%;" target="_blank" rel="noopener noreferrer">
<div style="display: flex; flex-direction: row; align-items: center;">
<div style="background-color: #f4f4f4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div>
<div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;">
<div style="background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div>
<div style="background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div>
</div>

[KetanKumar]

@Vnsa 

I thinks is fine can you try this

[Vnsa]

not seeing your suggestion? thanks again for helping !

[KetanKumar]

@Vnsa 

I mean this current code you can please add 

[Vnsa]

That's the code that's already there ?

I created a table on the page - with one row - two cells 

<table width="100%">
<tbody>
<tr>
<td>

Then added in the embed code from instagram that starts

<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/XXX" data-instgrm-version="12" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 540px; min-width: 326px; padding: 0; width: calc(100% - 2px);">
<div style="padding: 16px;"><a href="XXX" style="background: #FFFFFF; line-height: 0; padding: 0 0; text-align: center; text-decoration: none; width: 100%;" target="_blank" rel="noopener noreferrer">
<div style="display: flex; flex-direction: row; align-items: center;">
<div style="background-color: #f4f4f4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div>

[KetanKumar]

@Vnsa 

Thanks 

i mean remove table format add div code 

[Vnsa]

Hi - yes i'd worked that out, it's worked although at the moment the two images are small (on a desktop) version so I'm investigating how I fix that if you have any suggestions?

[KetanKumar]

@Vnsa 

Thanks for update.