Home › Forums › WoodMart support forum › Size chart not fully responsive on mobile device

Size chart not fully responsive on mobile device

Viewing 30 posts - 1 through 30 (of 31 total)
1 2
  • Author
    Posts
  • August 28, 2017 at 4:41 pm #18271

    MAYZEL
    Participant

    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.
    August 28, 2017 at 5:06 pm #18277

    Artem Temos
    Keymaster

    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

    August 28, 2017 at 6:43 pm #18286

    MAYZEL
    Participant

    how do I hide it on mobile device then please?

    August 29, 2017 at 6:04 am #18298

    Artem Temos
    Keymaster

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

    August 29, 2017 at 7:23 am #18315

    MAYZEL
    Participant

    Where do I put this code?

    August 29, 2017 at 7:26 am #18316

    Artem Temos
    Keymaster

    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

    August 29, 2017 at 3:14 pm #18370

    MAYZEL
    Participant

    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 🙁

    August 29, 2017 at 3:31 pm #18371

    Artem Temos
    Keymaster

    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?

    August 30, 2017 at 11:15 am #18439

    MAYZEL
    Participant

    Seet Attachment thanks

    Attachments:
    You must be logged in to view attached files.
    August 30, 2017 at 11:29 am #18442

    MAYZEL
    Participant

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

    August 30, 2017 at 12:25 pm #18447

    Artem Temos
    Keymaster

    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.

    August 30, 2017 at 1:35 pm #18457

    MAYZEL
    Participant

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

    August 30, 2017 at 1:38 pm #18458

    Artem Temos
    Keymaster

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

    August 30, 2017 at 1:45 pm #18462

    MAYZEL
    Participant

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

    August 30, 2017 at 1:49 pm #18464

    Artem Temos
    Keymaster

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

    August 30, 2017 at 2:36 pm #18471

    MAYZEL
    Participant

    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

    August 30, 2017 at 2:45 pm #18472

    Artem Temos
    Keymaster

    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?

    August 30, 2017 at 3:18 pm #18477

    MAYZEL
    Participant

    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.
    August 30, 2017 at 3:27 pm #18483

    Artem Temos
    Keymaster

    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;
}
    August 30, 2017 at 3:42 pm #18488

    MAYZEL
    Participant

    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.
    August 30, 2017 at 4:17 pm #18491

    MAYZEL
    Participant

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

    August 30, 2017 at 4:23 pm #18492

    MAYZEL
    Participant

    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

    August 30, 2017 at 4:53 pm #18496

    Artem Temos
    Keymaster

    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

    August 30, 2017 at 4:57 pm #18498

    MAYZEL
    Participant

    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?

    August 30, 2017 at 5:09 pm #18499

    Artem Temos
    Keymaster

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

    August 31, 2017 at 2:52 pm #18569

    MAYZEL
    Participant

    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?

    August 31, 2017 at 2:56 pm #18570

    Artem Temos
    Keymaster

    Add this code to the Custom CSS for mobile devices only 

    .woocommerce-Tabs-panel--description .wc-tab-inner table {
    display:none;
}
    August 31, 2017 at 5:17 pm #18583

    MAYZEL
    Participant

    This code is for all views.

    just want to disable it on mobile device please?

    August 31, 2017 at 5:44 pm #18585

    Artem Temos
    Keymaster

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

    August 31, 2017 at 7:13 pm #18588

    MAYZEL
    Participant

    Doesn’t work I give up on this topic.

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

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 31 total)
1 2