HTML Table with Images creates White Space

Technical Q&A
1

Hi, I am trying to add a table into my collection description to include images however one of the images has a lot of white space underneath.

382f545d3bfd22fbc82e0040a411c18f.png
382f545d3bfd22fbc82e0040a411c18f.png1920×1080 222 KB

Please can you advise me how I can correct this code so everything is inside the block with the correct spacing.

Voom Recover Fudge
SOLID 225 Switch On Resilient Nutrition
2 
<table>

 
 <tr>
 
<th colspan="2" rowspan="3">

![TEST_2c707bbe-a03d-4341-9619-0c6f8480ad7c.png?v=16...|540x750](upload://5rOcU6MLHjjm0s3k6Tg0YrHCtEb.png)

</th>

 <th colspan="2">

![Voom Recover Fudge|1080x250](upload://8k2Vadx4Bbsm0vjJtXk7govURxe.png)

</th>

 </tr>

 <tr>

 <th>

![SOLID 225|540x500](upload://oJMZnRCBhIz8a9jV2Go2sNVUlfn.jpeg)

</th>

 <th>

![Switch On Resilient Nutrition|540x500](upload://hHSqxsGjsOVIADlAnHhiA2qYpzC.png)

</th>

 </tr>
 
 
</table>

This seems to be working. If the issue persists, provide a link to the page and i can look further

1 Like
3

Thank you so much for the response, however, it still is not working. Please see here.

4

No problem.

Had a quick look, you’ll need to go to your theme.scss file and find some code that states the following:

margin-top: 0.9375rem;
margin-bottom: 0.9375rem;

change these to 0 to remove the big gap between the top row and lower rows.

Then to bring the top image in line, you’ll need to add a padding of 12px to the element style containing the ‘Protein Recover Fudge’ image.

Then for the bottom alignment the easiest thing might be to edit the actual image ‘Welcome to xmiles’ to be slightly larger.

hope this helps, if you need assistance send me your store.myshopify.com link and i’ll request access