Optimize table rows for mobile

Solved
Kjankko
Pathfinder
117 2 13

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

0 Likes
Pallavi
Shopify Expert
1116 146 178

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;
}
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Kjankko
Pathfinder
117 2 13

It works - thank you soooo much  @Pallavi !

0 Likes
Pallavi
Shopify Expert
1116 146 178

Kindly feel free to get back to me if you need any further assistance Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes