How to fix size chart display issues on Venue theme?

[GDgear]

Hello all,

I'm using the Venue theme, I have a size chart for my page [ https://gd-gear.com/ ] and it was working fine, but then I added a few more rows, and it went weird.

After searching and try some code, I was able to get the pop-up to scroll down, but I am still left with the original issue where the pop-up cuts off the first few rows and header.

On my desktop, if I reduce my window display to 70%, the whole pop-up fits on screen, so I know it is all there, but not sure why it does not open right at the top of the chart?

Thanks you for any help!

- L

[GDgear · Accepted solution]

SOLVED my issue:

In my size-chart.liquid after lots of trial and error I fixed my problem. Sorry if I sound like a noob, I do not know CSS

Code section:

.pop-up-content {
position: absolute;
top: 75%; /* This controls pop-up height*/
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: auto;
border-radius: 0.5rem;

}

When top is set to its default of 50%, the pop-up get cut off and I can scroll down but not up, as said before zoom the screen out shows it, when I increase the percentage It slowly lower where the top appears on my screen, optimal seemed to be 75 - 80%.

Hope this help anyone else if they get the same error.

Bonus stuff I use:

Assets/theme.scss.liquid, paste at bottom

.pop-up-modal.show-pop-up {
overflow: auto;
}

Snippet/size-chart.liquid, paste at bottom

}
@media only screen and (max-width: 749px) {
.pop-up-content, .size-chart-content table {
width: 100% ;
}
.size-chart-content th, .size-chart-content td {
padding: 4px;
}

Layout/theme.liquid

{% if request.page_type == 'product' %}
{% if product.options contains 'Size' %}
{% render 'size-chart' %}
{% endif %}
{% endif %}

These are codes I used to get a clickable and scrollable size chart