Modal popup too narrow

CS2021
New Member
2 0 0

Hello

I have a popup on my store to show the sizing chart, you can find the chart here

https://capsulestudio.net/collections/linen/products/little-black-dress

 

When you click on the chart on mobile, it loads perfectly, but on desktop (tried multiple browsers) it loads the last column with a 1char width for some reason, I'd like to show the full column naturally.

The size chart is a modal, here is the code:

SIZE CHART MODAL
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
<div id="modal-size-chart" class="Modal Modal--size-chart" aria-hidden="true" role="dialog" data-scrollable>
  <button class="Modal__Close Modal__Close--outside" data-action="close-modal">{%- render 'icon' with 'close' -%}</button>
 
  <div class="Page__Content Rte">
    <header class="Modal__Header">
      <h3 class="Modal__Title Heading u-h2">Size Chart</h3>
      <!-- <p class="Modal__Description">Description</p> -->
    </header>
 
    <div class="Modal__Content">
      {% if collection.handle == "suits" %}
      {%- render 'size-chart' -%}
      {% endif %}
            {% if product.tags contains "polandsweat" %}
      {%- render 'size-chart-hoodies' -%}
      {% endif %}
              {% if product.tags contains "portugal" %}
      {%- render 'size-chart-portugal' -%}
      {% endif %}
                    {% if product.tags contains "shortsshirts" %}
      {%- render 'size-chart-linen' -%}
      {% endif %}
                {% if product.tags contains "Dress" %}
      {%- render 'size-chart-linendress' -%}
      {% endif %}
      
    </div>
  </div>
</div>

 

Screenshot 2021-05-01 at 7.58.50.png

0 Likes
JHKCreate
Shopify Partner
2481 426 581

Hi @CS2021 

Checked this on Chrome & Edge:

JHKCreate_0-1619857834459.png


It looks perfect, what browsers did you try?

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
CS2021
New Member
2 0 0

Hi @JHKCreate !

So I think I actually managed to fix it on my own hence why it works now, thanks for checking, so in case anyone else finds this issue in the future here is what I found.

In theme.scss.liquid there was the following snippet

.SizeChart td {
width: 20%;


I changed the width from 25% to 20% and that worked to fit in more columns properly!

0 Likes