All things Shopify and commerce
Hi, I have a question, I'm creating my company's website, it's not online yet, only preview.
I have this table
<table style="width: 680px; height: 242px; border-radius: 20px;">
<tbody>
<tr>
<td style="width: 670px; background-color: #e8e8e8;" colspan="2"><strong> CARATTERISTICHE DEL PRODOTTO</strong></td>
</tr>
<tr>
<td style="width: 187.625px;"><em><strong>Materiale </strong></em></td>
<td style="width: 476.375px; text-align: left;">Poliestere Nautico 120g</td>
</tr>
<tr>
<td style="width: 187.625px;"><em><strong>Limite dimensione </strong></em></td>
<td style="width: 476.375px; text-align: left;">
<p style="text-align: left;">-</p>
</td>
</tr>
<tr>
<td style="width: 187.625px;"><em><strong>Uso esterno</strong></em></td>
<td style="width: 476.375px; text-align: left;">Sì</td>
</tr>
<tr>
<td style="width: 187.625px;"><em><strong>Tecnica di stampa </strong></em></td>
<td style="width: 476.375px; text-align: left;">Stampa In Sublimazione - Inchiostri Certificati</td>
</tr>
</tbody>
</table>
on my product page, in an html section.
I would like the text in the table to wrap when in mobile mode, so as not to have the scrollbar that I don't like, while it is entirely visible in desktop mode, what do I do?
Solved! Go to the solution
This is an accepted solution.
Hello @SaraCicchinelli,
The problem arises from the inline CSS applied to the table, which hinders its responsiveness on mobile screens. I've removed all the widths you previously set. Please try the updated code.
<table style="margin: 0 20px;">
<tbody>
<tr>
<td style="background-color: #e8e8e8; " colspan="2"><strong> CARATTERISTICHE DEL PRODOTTO</strong></td>
</tr>
<tr>
<td><em><strong>Materiale </strong></em></td>
<td style="text-align: left;">Poliestere Nautico 120g</td>
</tr>
<tr>
<td <em><strong>Limite dimensione </strong></em></td>
<td style="text-align: left;">
<p style="text-align: left;">-</p></td>
</tr>
<tr>
<td ><em><strong>Uso esterno</strong></em></td>
<td style="text-align: left;">Sì</td>
</tr>
<tr>
<td ><em><strong>Tecnica di stampa </strong></em></td>
<td style="text-align: left;">Stampa In Sublimazione - Inchiostri Certificati</td>
</tr>
</tbody>
</table>
This is an accepted solution.
Hello @SaraCicchinelli,
The problem arises from the inline CSS applied to the table, which hinders its responsiveness on mobile screens. I've removed all the widths you previously set. Please try the updated code.
<table style="margin: 0 20px;">
<tbody>
<tr>
<td style="background-color: #e8e8e8; " colspan="2"><strong> CARATTERISTICHE DEL PRODOTTO</strong></td>
</tr>
<tr>
<td><em><strong>Materiale </strong></em></td>
<td style="text-align: left;">Poliestere Nautico 120g</td>
</tr>
<tr>
<td <em><strong>Limite dimensione </strong></em></td>
<td style="text-align: left;">
<p style="text-align: left;">-</p></td>
</tr>
<tr>
<td ><em><strong>Uso esterno</strong></em></td>
<td style="text-align: left;">Sì</td>
</tr>
<tr>
<td ><em><strong>Tecnica di stampa </strong></em></td>
<td style="text-align: left;">Stampa In Sublimazione - Inchiostri Certificati</td>
</tr>
</tbody>
</table>
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025