Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
This is an accepted solution.
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.
Hello, @Wladi
Thanks for Post.
Please share your site URL,
So I will check and provide a solution here.
Thank you. Heavyfit.de (wladwlad)
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>
Thanks for it.
sorry for that your store is password protected can you please share us.
Yes of course password is wladwlad
@KetanKumar wrote:Thanks for it.
sorry for that your store is password protected can you please share us.
This is an accepted solution.
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.
Thank you very much it works (:
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 !
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
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?
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
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>
I thinks is fine can you try this
not seeing your suggestion? thanks again for helping !
I mean this current code you can please add
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>
Thanks
i mean remove table format add div code
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?
Thanks for update.
We are having this issue as well with the Debut theme on mobile as shown below. How can we fix this? Can someone please help?!
Sorry for facing this issue, it's my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question. 😊
Please share your site URL,
So I will check and provide a solution here.
Thanks for it
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 749px) {
.product-single__description .rte table tr td:first-child {
width: 60px;
}
.product-single__description th, .product-single__description td {
text-align: left;
border: 1px solid #e8e9eb;
padding: 4px 5px;
font-size: 10px;
}
}
it's my pleasure to help us
Hi.
I also need help making a table responsive.
See attached image for desktop layout. Ideally on mobile I'd like it to collapse to 2 columns.
Using Prestige theme.
site URL: https://arouz.biz
password: naughtyfun
This is the code I'm using for the table:
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:0px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:0px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0lax{text-align:center;vertical-align:middle}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-0lax" width="25%">Discreet <br>delivery<br><img src="https://cdn.shopify.com/s/files/1/0524/7991/8233/files/icon-discreet.png?v=1615368040">
</th>
<th class="tg-0lax" width="25%">elegant & subtle packaging<br><img src="https://cdn.shopify.com/s/files/1/0524/7991/8233/files/icon-packaging.png?v=1615368040">
</th>
<th class="tg-0lax" width="25%">secure payments with 3d secure<br><img src="https://cdn.shopify.com/s/files/1/0524/7991/8233/files/icon-3d-secure.png?v=1615368040">
</th>
<th class="tg-0lax" width="25%">electronic <br>gift cards<br><img src="https://cdn.shopify.com/s/files/1/0524/7991/8233/files/icon-gift-cards.png?v=1615368040">
</th>
</tr>
</thead>
</table>
thansk for update
can you please use other section like logo or image gallery it much better doesn't use table code
Hi @KetanKumar
Unfortunately this theme does not have a logo or image gallery.
also, the builtin sections don't allow me to control the exact size of the icons.
A table seems my best option.
which theme you have used?
Hi I have the same issue in our site. Can you please help us?
Also, I can't find the timber file in the code files.
https://www.hawaiiansouthshore.com/pages/shipping
Thank you so much.
possible to only scroll in mobile asper your content
Hi @KetanKumar ,
hope you can help me as well with my problem. I have the same issue with my table, which is not displayed correctly in mobile view.
This is the page: https://carisma-mobil.myshopify.com/pages/tarifubersicht
Best regards
Hi @sheenutlang
Try using these steps below note: using a laptop/desktop makes it easier than using a phone cause you see everything clearly
1. Log into your shopify main e.g https://yourshop.myshopify.com/admin
2. Under Sales channels click online store>themes
3. In your live, click actions>edit code
Here you willl find your code files, look in Assets you'll find timber file mine is called timber.scss.liquid
What you do in this file affects other stuff in the whole site so be careful.
after this add the zebra striping code from the css page to make sure you are at the right place to edit your code https://css-tricks.com/responsive-data-tables/. once u copy paste and save the code refresh. if you have zebra striping on your table succesfully. Just follow the rest of the code and replace your values for the places where it says nth of type before with your own table headers.
This is the zebra stripe code for table below.
table { width: 100%; border-collapse: collapse; } /* Zebra striping */ tr:nth-of-type(odd) { background: #eee; } th { background: #333; color: white; font-weight: bold; } td, th { padding: 6px; border: 1px solid #ccc; text-align: left; }
Will this work my store as well? I created a page and where I inserted a table. On desktop it works fine but has the same issue when on a mobile device.
can you please send store url
Hello, I am trying to create a table like this:
This is the closest code example I have found:
https://codepen.io/kilianso/pen/BpZqON
How can I customize this code to suit my needs?
Your assistance is kindly appreciated.
Hi Ketan,
I am facing the same issue for my website. Would you be able to help here. Theme - Brooklyn, URL - https://mayindia.in/products/coral-handwoven-muslin-cotton
sorry for that issue can you pleas confirm this look?
Hi Ketan - I am sorry but I didn't get your point.
Hello @KetanKumar
My Shop: https://customicezurich.com/ Password: notschger
I created a table on my Sizing page. The problem is on the mobile version it is still full length. I would like to have it responsive (one should be able to scroll through it but the page should remain the mobile size version).
How can i fix that?
Thanks in advance
sorry for that issue can you please show me prodct url
thanks for it
i have check code you have added inline css in table code please remove and check
that's all td inline style
<style type="text/css"><!--
table.sizingchart {
width: 100%;
text-align: center;
border-collapse: collapse;
}
table.sizingchart tr:nth-child(even) {
background: #EEEEEE;
}
--></style>
<table class="sizingchart" style="width: 100%;">
<tbody>
<tr>
<td style="width: 109px; text-align: center;"><strong>Length (mm)</strong></td>
<td style="width: 38px; text-align: center;">44</td>
<td style="width: 38px; text-align: center;">47</td>
<td style="width: 38px; text-align: center;">49</td>
<td style="width: 38px; text-align: center;">52</td>
<td style="width: 38px; text-align: center;">55</td>
<td style="width: 38px; text-align: center;">57</td>
<td style="width: 38px; text-align: center;">60</td>
<td style="width: 38px; text-align: center;">62</td>
<td style="width: 38px; text-align: center;">65</td>
<td style="width: 38px; text-align: center;">67</td>
<td style="width: 38px; text-align: center;">70</td>
</tr>
<tr>
<td style="width: 109px; text-align: center;"><strong>US Size</strong></td>
<td style="width: 38px; text-align: center;">3</td>
<td style="width: 38px; text-align: center;">4</td>
<td style="width: 38px; text-align: center;">5</td>
<td style="width: 38px; text-align: center;">6</td>
<td style="width: 38px; text-align: center;">7</td>
<td style="width: 38px; text-align: center;">8</td>
<td style="width: 38px; text-align: center;">9</td>
<td style="width: 38px; text-align: center;">10</td>
<td style="width: 38px; text-align: center;">11</td>
<td style="width: 38px; text-align: center;">12</td>
<td style="width: 38px; text-align: center;">13</td>
</tr>
<tr>
<td style="width: 109px; text-align: center;"><strong>UK & AUS Size</strong></td>
<td style="width: 38px; text-align: center;">F</td>
<td style="width: 38px; text-align: center;">H</td>
<td style="width: 38px; text-align: center;">J<span>½</span></td>
<td style="width: 38px; text-align: center;">L<span>½</span></td>
<td style="width: 38px; text-align: center;">N<span>½</span></td>
<td style="width: 38px; text-align: center;">P<span>½</span></td>
<td style="width: 38px; text-align: center;">R<span>½</span></td>
<td style="width: 38px; text-align: center;">T<span>½</span></td>
<td style="width: 38px; text-align: center;">V<span>½</span></td>
<td style="width: 38px; text-align: center;">X<span>½</span></td>
<td style="width: 38px; text-align: center;">Z1</td>
</tr>
<tr>
<td style="width: 109px; text-align: center;"><strong>EUR Size</strong></td>
<td style="width: 38px; text-align: center;">44</td>
<td style="width: 38px; text-align: center;">47</td>
<td style="width: 38px; text-align: center;">49</td>
<td style="width: 38px; text-align: center;">52</td>
<td style="width: 38px; text-align: center;">55</td>
<td style="width: 38px; text-align: center;">57</td>
<td style="width: 38px; text-align: center;">60</td>
<td style="width: 38px; text-align: center;">62</td>
<td style="width: 38px; text-align: center;">65</td>
<td style="width: 38px; text-align: center;">67</td>
<td style="width: 38px; text-align: center;">70</td>
</tr>
<tr>
<td style="width: 109px; text-align: center;"><strong>East Asia Size</strong></td>
<td style="width: 38px; text-align: center;">4</td>
<td style="width: 38px; text-align: center;">7</td>
<td style="width: 38px; text-align: center;">9</td>
<td style="width: 38px; text-align: center;">11</td>
<td style="width: 38px; text-align: center;">14</td>
<td style="width: 38px; text-align: center;">16</td>
<td style="width: 38px; text-align: center;">18</td>
<td style="width: 38px; text-align: center;">20</td>
<td style="width: 38px; text-align: center;">23</td>
<td style="width: 38px; text-align: center;">25</td>
<td style="width: 38px; text-align: center;">27</td>
</tr>
</tbody>
</table>
This is the code of my table what do i have to change exactly?
yes please find and removed
style="width: 109px; text-align: center;"
style="width: 38px; text-align: center;"
all TD
Hello @KetanKumar
I have the same problem with my size chart in my website
Please I would appreciate if you could help out
address is https://adebyfemi.com/pages/customer-service
https://adebyfemi.com/pages/size-guidance
Thank you.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024