Liquid, JavaScript, themes, sales channels
Hi Friends,
I have created a table row for my Shopify store. The row uses that code:
<table width="100%">
<tbody>
<tr>
<td style="width: 33.3%;">
<div class="p1" style="text-align: left;">TAMPEREEN LUONTOKAUPPA</div>
<div class="p1" style="text-align: left;">Laukontori 4<br /> 33200 TAMPERE<br /> puh. 03 222 0077</div>
</td>
<td style="width: 33.3%;">
<p class="p1" style="text-align: left;"><br />RUOHONJUURI AINOA<br />Länsituulentie 50<br />02100 Espoo<br />puh. 044 763 9560</p>
</td>
<td style="width: 33.3%; text-align: center;">
<p class="p1" style="text-align: left;">RUOHONJUURI OY CITYCENTER<br />Keskuskatu 6<br />00100 HELSINKI<br />puh. 020 766 9755</p>
</td>
</tr>
</tbody>
That looks really good on desktop devices, but awful in mobile view.
My question: How can I set mobile view from 3 rows per line -> to 1 row per line?
URL: https://tervaskanto.myshopify.com/pages/jalleenmyyjat
Password: whawst
Solved! Go to the solution
This is an accepted solution.
Hello There,
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 767px){
section.entry-content table tbody td {
width: 100% !important;
display: inline-block;
padding: 15px 0;
font-size: 13px;
}
section.entry-content table tbody td p.p1 {
margin: 0;
}
section.entry-content table {
margin: 0;
}
div#shopify-section-footer footer {
margin-top: 0;
padding-top: 0;
}
section.entry-content table tbody td:nth-child(2) p {
display: inline-block;
}
section.entry-content table tbody td:nth-child(2) p br:nth-child(1) {
display: none;
}
}
This is an accepted solution.
Hello There,
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 767px){
section.entry-content table tbody td {
width: 100% !important;
display: inline-block;
padding: 15px 0;
font-size: 13px;
}
section.entry-content table tbody td p.p1 {
margin: 0;
}
section.entry-content table {
margin: 0;
}
div#shopify-section-footer footer {
margin-top: 0;
padding-top: 0;
}
section.entry-content table tbody td:nth-child(2) p {
display: inline-block;
}
section.entry-content table tbody td:nth-child(2) p br:nth-child(1) {
display: none;
}
}
Kindly feel free to get back to me if you need any further assistance Thanks!
<tbody id="myTable">
<tr>
<td>2P TRADING S.r.l.</td>
<td>Livia Pardini</td>
<td><a href="mailto:livia@2ptrading.com">livia@2ptrading.com</a></td>
<td>Italy</td>
<td>marble, granite, stones</td>
</tr>
<tr>
<td>A&G 23 S.r.l.</td>
<td>Gian Luca</td>
<td><a href="mailto:gianluca@ag23.net">gianluca@ag23.net</a></td>
<td>Italy</td>
<td>limestone</td>
</tr>
<tr>
<td>AADHAR PRIMEEXIM PRIVATE LTD.</td>
<td>Premesh Bhootra</td>
<td><a href="mailto:premesh@drtcindia.com">premesh@drtcindia.com</a></td>
<td>India</td>
<td>sandstone, marble, granite, slatestone & quartzite</td>
</tr>
<tr>
<td>AAPT DISTRIBUTION PVT LTD</td>
<td>Raman Yuvarajan</td>
<td><a href="mailto:raman@aapt.co.in">raman@aapt.co.in</a></td>
<td>India</td>
<td>granite blocks, slabs, tiles & tombstones</td>
</tr>
<tr>
<td>AARDWOLF INDUSTRIES LLC</td>
<td>Nhan Vien Ky</td>
<td><a href="mailto:nhan@aardwolf.com.vn">nhan@aardwolf.com.vn</a></td>
<td>Vietnam</td>
<td>stone, glass</td>
</tr>
<tr>
<td>A.A.T.C. AND CO. S.r.l.</td>
<td>Richard Branson</td>
<td><a href="mailto:richard.branson@aatc.it">richard.branson@aatc.it</a></td>
<td>Italy</td>
<td>marble & granite</td>
</tr>
This my table code its desktop view good but mobile view not same please suggest me to how fix this am trying your above code also but i cont fix that please give me best solution for this Thank you
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024