Modify size guide table columns width

Hi, I want to modify size guide table widths as mobile screen is rather narrow and default rendering leads to cells content being shown in several rows.
Unfortunately I can’t access the code of the size guide table directly.
Can you please advise any solution?

Hello,

The size guide is a table and the table is not responsive by its nature. You can add a scroll to the table.

Best Regards

For regular table to change the width of row I can apply something like
<th style="width: 20%;">Size</th>

But for this element I can’t access the table code.

Hello,

You would better not add this custom CSS as it would be also applied to tables on the checkout page and shopping cart.

Best Regards

It turns out it’s easier to figure this out by myself.
Here’s the CSS in case somebody will be searching for a solution.

.wd-sizeguide-table td:nth-child(3) {
	width: 25%;
}

Where number in brackets is the number of column. If you have several sizeguides add particular one’s class.
If nothing changes adjust padding as follows:

.wd-sizeguide-table td {
	padding: 15px 5px;
}

Hello,

Thank you for this workaround.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts