Size chart code

[country305]

"The size chart on my website looks weird on desktop. The table layout seems misaligned or broken — some columns don’t line up properly, and the spacing looks off. It mught be a mobile issue to; it’s happening on desktop view. Can you check if there’s a conflict with the site’s CSS or if the table markup needs to be cleaned up? I need the chart to be properly aligned and easy to read.

[country305]

[The_ScriptFlow]

Hey @country305,
Could you please share the store url along with password [if applicable] so that I can take a look and provide you solution code.
Waiting to hear back from you.
Thanks

[namphan]

Hi @country305,

Please send the website link, I will check it for you

[Zachary1]

Hi @country305

This seems like a conflict between your table related code and page elements. It needs to be further adjusted via CSS from backend. Kindly share this page URL if possible, so that I can have a deeper check under inspection mode page. Thank you.

[TheUntechnickle]

Hey @country305!

Welcome to the Shopify Community! Really excited to help you tackle this one.

Mind sharing your store URL so I can dive in and see exactly what’s going on? If you’ve got a password set up, just toss that my way too. I’ll take a thorough look at your setup and get you a rock-solid solution that’s clean, optimized, and works like a charm.

Looking forward to getting this wrapped up for you!

Best,
Shubham | Untechnickle(dot)com

[Small_Task_Help]

@country305

"The size chart on my website looks weird on desktop. The table layout seems misaligned or broken — some columns don’t line up properly, and the spacing looks off. It mught be a mobile issue to; it’s happening on desktop view. Can you check if there’s a conflict with the site’s CSS or if the table markup needs to be cleaned up? I need the chart to be properly aligned and easy to read.

Hi,

Hope this will help

• Your table might be misaligned because of bad HTML or conflicting CSS
• Use clean table markup
  see example

<table class="size-chart-table">
  <thead>
    <tr>
      <th>Size</th>
      <th>Chest (in)</th>
      <th>Waist (in)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Small</td>
      <td>34-36</td>
      <td>28-30</td>
    </tr>
    <tr>
      <td>Medium</td>
      <td>38-40</td>
      <td>32-34</td>
    </tr>
  </tbody>
</table>

• Add simple, clean CSS (with mobile support)

CSS example

.size-chart-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: center;
}

.size-chart-table th,
.size-chart-table td {
  border: 1px solid #ccc;
  padding: 10px;
}

@media (max-width: 768px) {
  .size-chart-table {
    font-size: 14px;
  }
}

[country305]

Here is the url My Store and the password is demo

[namphan]

Hi @country305,

Please change code here:

Code:

style="min-width: 360px;display: block;overflow-x: auto;white-space: nowrap;min-width: 360px;"

If I helped you, then a Like would be truly appreciated.

[rajweb]

@country305

The size chart on my website looks weird on desktop. The table layout seems misaligned or broken — some columns don’t line up properly, and the spacing looks off. It mught be a mobile issue to; it’s happening on desktop view. Can you check if there’s a conflict with the site’s CSS or if the table markup needs to be cleaned up? I need the chart to be properly aligned and easy to read.

Hey @country305 ,Welcome to the Shopify Community!
Yes, I checked your attached image and noticed the issue you mentioned with the size chart layout. I’ve worked on a similar size chart for one of my clients in the past — I’ve attached a reference for you to see.

If you’d like, I can provide you with the exact code I used, or help you implement it on your store to ensure it looks clean, responsive, and properly aligned across all devices.

Feel free to reach out if you need any help!

Best regards,
Rajat
Shopify Expert

[tim_1]

This happens because your size chart table does not fit into the space allotted.
The simplest would be to add a horizontal scroll-bar.

One way is to edit your products descriptions to modify the HTML structure (as we need to wrap the Chart table with another element) and then add some CSS code to make it look fine. That’s a lot of editing however.

We can automate it:

In Customze, add a “Custom liquid” block to your “Product info” section and paste this code:

<script>
  let sc = document.querySelector(':not(.sc-wrapper) > #size-guide'); 
  if (sc) sc.outerHTML=`<div class=sc-wrapper>${sc.outerHTML}</div>`;
</script>
<style>
.  sc-wrapper {
    width: 100%;
    overflow-x: scroll;
    padding:1px;
  }
  
  #size-guide td {
    word-break:  initial !important;
  }
</style>

This will make it look like this:

[country305]

which part of the code is this? I have no clue how to code.

[namphan]

Hi @country305,

It shows at product description so go to products and select show html. Refer:

Then you will find it at the first line of the code.