Make table responsive

Solved
Wladi
Excursionist
39 0 6

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?

 

Screenshot (16).png

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
32575 3272 10852

This is an 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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 53 (53)
KetanKumar
Shopify Partner
32575 3272 10852

Hello, @Wladi 

Thanks for Post.

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Wladi
Excursionist
39 0 6

Thank you. Heavyfit.de (wladwlad)

Wladi
Excursionist
39 0 6

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
Shopify Partner
32575 3272 10852

@Wladi 

Thanks for it.

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Wladi
Excursionist
39 0 6

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
Shopify Partner
32575 3272 10852

This is an 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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Wladi
Excursionist
39 0 6

Thank you very much it works (:

Vnsa
Excursionist
33 0 13

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

desktop view.png

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

mobile table issue.png

site is www.lindseybrown.com

hope you can help !

KetanKumar
Shopify Partner
32575 3272 10852

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Vnsa
Excursionist
33 0 13

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
Shopify Partner
32575 3272 10852

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Vnsa
Excursionist
33 0 13

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
Shopify Partner
32575 3272 10852

@Vnsa 

I thinks is fine can you try this

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Vnsa
Excursionist
33 0 13

not seeing your suggestion? thanks again for helping !

KetanKumar
Shopify Partner
32575 3272 10852

@Vnsa 

I mean this current code you can please add 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Vnsa
Excursionist
33 0 13

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
Shopify Partner
32575 3272 10852

@Vnsa 

Thanks 

i mean remove table format add div code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Vnsa
Excursionist
33 0 13

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
Shopify Partner
32575 3272 10852

@Vnsa 

Thanks for update.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing