Table Padding Issues

Shopify Discussion
1

hey guys, I have a massive issue where my table in the product description looks neat and tidy when editing, but once it goes live, theres massive padding between each row and the “description” and “measurements” are so far apart. Can someone please help me fix this and make it look much more neater.

My website is www.vaultvintagegc.com if you need to see better.

35354.png
35354.png1290×2796 184 KB

1 Like
2

Hey @vaultvintagegc

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1741589168248.png
Moeed_0-1741589168248.png346×751 23.9 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @vaultvintagegc , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

.product-single__description.rte > h3 {
 display: none !important;
}

Screenshot_5.png
Screenshot_5.png382×804 42.4 KB

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

4

Hey @vaultvintagegc

The issue seems to be caused by excessive padding or margin applied to the , ,

, or

elements. You can fix this by adding some CSS styles to reduce the spacing.

Try adding this CSS to your Shopify theme or inline within your HTML:

table {
    width: 100%;
    border-collapse: collapse; /* Removes extra spacing between table rows */
}

td, th {
    padding: 5px; /* Adjust padding to make it more compact */
    text-align: left;
}

h1 {
    margin-bottom: 10px; /* Reduce spacing between title and table */
}

p {
    margin: 0; /* Remove default paragraph margin */
}

Updated HTML:

<table>

<tr>

<td colspan="2">

# **Description**

</td>

</tr>

<tr>

<td>

**Made In:**

</td>

<td>

Australia

</td>

</tr>

<tr>

<td>

**Brand:**

</td>

<td>

Rip Curl

</td>

</tr>

<tr>

<td>

**Material:**

</td>

<td>

100% Cotton

</td>

</tr>

<tr>

<td>

**Item Size:**

</td>

<td>

Large

</td>

</tr>

<tr>

<td>

**Model Height:**

</td>

<td>

6ft

</td>

</tr>

<tr>

<td>

**Condition:**

</td>

<td>

9/10 (Loose Collar / Pin Hole)

</td>

</tr>

</table>

This should make your table look much cleaner and prevent the huge gaps between rows and sections. Let me know if you need further adjustments!

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,
Rajat

5

Hi there, this majorly helped the look i was going for! Is there anyway to code this into the theme or will i have to adjust the HTML for every product?