Is anyone aware of code for the Dawn theme that will autosize columns in mobile to fit text in a single line?
See picture below for mobile version. The desktop version is fine and all text is able to fit on one line.
Here is how I created the table:
Creating a size chart snippet
- In the Snippets directory, click Add a new snippet.
- Name your snippet size-chart, and click Create snippet:
- Copy the following into your size-chart snippet:
×
{{ pages.size-chart-1.content }}
**.pop-up-modal** {
**position**: fixed;
**left**: 0;
**top**: 0;
**width**: 100%;
**height**: 100%;
**background-color**: rgba(0, 0, 0, 0.5);
**opacity**: 0;
**display**: none;
**transform**: scale(1.1);
**transition**: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
**.pop-up-content** {
**position**: absolute;
**top**: 50%;
**left**: 50%;
**transform**: translate(-50%, -50%);
**background-color**: white;
**padding**: 1rem 1.5rem;
**width**: auto;
**border-radius**: 0.5rem;
}
**.pop-up-content** table {
**table-layout**: auto;
}
**.close-button** {
**float**: right;
**width**: 1.5rem;
**line-height**: 1.5rem;
**text-align**: center;
**cursor**: pointer;
**border-radius**: 0.25rem;
**background-color**: lightgray;
}
**.close-button****:hover** {
**background-color**: darkgray;
}
**.show-pop-up** {
**z-index**: 12;
**opacity**: 1;
**display**: block;
**transform**: scale(1);
**transition**: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
**.trigger-pop-up** {
**margin**: 10px 0 10px 0;
**width**: 100%;
}
**@media** only screen and (max-width: 749px) {
**.pop-up-content****,**
**.size-chart-1-content** table {
**width**: 100%;
}
**.size-chart-1-content** th**,**
**.size-chart-1-content** td {
**padding**: 10px;
}
}
- In the Layout directory, click to open your theme.liquid file.
- Find the closing tag. Right above the closing tag, paste the following code:
{% if request.page_type == ‘product’ %}
{% if product.options contains ‘Size’ %}
{% render ‘size-chart-1’ %}
{% endif %}
{% endif %}
Thanks in advance for the help,
A
Litos
2
Hi @alex_p33 ,
Please send your site and if your site is password protected, please send me the password. I will check it.
Hi @alex_p33 ,
Layoutbase here, welcome to Shopify Community! Please give the following a try:
- Locate this section from your current file:
@media only screen and (max-width: 749px) {
.pop-up-content,
.size-chart-1-content table {
width: 100%;
}
.size-chart-1-content th,
.size-chart-1-content td {
padding: 10px;
}
}
@media only screen and (max-width: 749px) {
.pop-up-content,
.size-chart-1-content table {
width: 100%;
}
.size-chart-1-content th,
.size-chart-1-content td {
padding: 10px;
}
.size-chart-1-content table {
white-space: nowrap;
}
.size-chart-1-content {
overflow-y: auto;
}
}
Hope you find this suggestion helpful!
Best regards,
Layoutbase - Homepage & landing page-builder
Thank you for the reply Layoutbase! Unfortunately, this did not solve the issue. Do you have another suggestion as to what could solve the problem?
Thanks,
A
Hi @alex_p33 ,
Sorry to hear that, do you mind sharing your store URL so we can take a more holistic look into your code?
Thank you,
Layoutbase
