Size chart not fully responsive on mobile device

On the size chart on my single product page. the chart is fully responsive.

I change the size to heading six on the edit page which is the best I can get it to.

but still cuts of the last part of the size chart on mobile device.

Attachments:

You must be logged in to view attached files.

Hi,

As we can see, you are using HTML table tag for your charts and unfortunately, there is no way to make it fit the space on mobile view. You need to hide it or split into a few tables if you want to make it look better on mobile devices.

Regards

how do I hide it on mobile device then please?

Try to add the hidden-xs CSS class to the table.

Where do I put this code?

As we can see, you have added your size charts with <table> tag to your products description field. So you just need to a CSS class to this table while editing your product description in the dashboard

<table class="hidden-xs"...

Regards

surely there is a better way to make this table look better, even on the desktop look its very large,

My previous theme looked very similar to how I have it on the edit page 🙁

Could you please provide an example or some screenshot of how it looks on your previous theme so we can see is it possible with Basel or not?

Seet Attachment thanks

Attachments:

You must be logged in to view attached files.

The size chart looks so much better like the pdf I sent you and I can make it responsive to mobile this way

It seems to have the same look as on our demo and we don’t see the difference. Maybe we understand you wrong but it uses the same table and it is not responsive as well.

look on my website its looks a lot different to my previous theme

Are you talking about borders for the table? There are only two differences: the width for the table and borders.

yes both I prefer it to look like my old theme if possible?

Also, we just noticed that tables have different structures (orientation). Do you have a source for the table from your previous theme?

I think id the description area was boxed layout instead of full screen.?

But I don’t get the option on this theme?

it very spread out, I prefer the look to be boxed if you have a custom code for this?

that would be perfect. I think that will solve the issue

The main difference that columns with titles on your website now is in the first row. And on your previous theme they was as a first column. See the screenshot https://gyazo.com/a5ce3d58296e4eef288fabcdd76465ff . Do you see the difference?

I see what you mean but that’s just a different table I copy and paste them into my description.

Some tables come like that but the end product still should look not full page stle.

you see the description is boxed on my previous theme on the theme its massive.

I have attached the table for you again. this is the same one as on your site see how it looks.

The older style looks so much better. if this is possible please.

If you can box the description and try this for me?

Attachments:

You must be logged in to view attached files.

OK, so if you want to make it smaller you can add the following code snippet to the Custom CSS in Theme Settings

.wc-tab-inner table {
	max-width:700px;
	margin: 0 auto;
}

Ha ha Ha surely that code you just, from the first comment I made could of saved us both loads of time. If you sent it then, lol

Is there any way that the description could be where I have marked the arrow on the attachment?

Attachments:

You must be logged in to view attached files.

I cant work out how to hide the size chat on mobile device

Maybe what I’m going to do is have a size chart on the menu instead. how can I have this open as a pop up window instead of a page?
This would make life so much easier as this chart is a head ache.

Stressing me out lol

We suggest you to watch our video tutorial that demonstrates how to create mega menu dropdowns so you can add the size chart there too https://www.youtube.com/watch?v=fWUe8wPLG2g

No you didn’t follow m there lol

I mean how to create a size chart, then it pop up in description, I’ve found a plug in thanks.

Did you receive my message around the description area?

You can’t move only description there, but you can move all tabs there in Theme Settings -> Product page.

That looks so much better less wasted space thank you.

Can you send a custom code that will hide the table on Mobile Device please?

Add this code to the Custom CSS for mobile devices only

.woocommerce-Tabs-panel--description .wc-tab-inner table {
    display:none;
}

This code is for all views.

just want to disable it on mobile device please?

You need to add it to the Custom CSS field for mobile devices only.

Doesn’t work I give up on this topic.

I have got it to the best I can do I suppose

[Author]

Posts