Problem with column order on mobile version

Home Forums Data Table Plugin Problem with column order on mobile version

This topic contains 10 replies, has 3 voices, and was last updated by Ole_Support Ole_Support 9 months, 2 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #16171

    admin136089
    Participant

    Hey

    First of all, thanks for the amazing plugins. Have been using ‘Tables’ and ‘Pricing Tables’, both brilliant.

    I had to create the pricing table in the table plugin, as it had to be 5 columns wide and 12 rows high. I am experiencing two issues.

    Website: http://www.loxdale.com/general-english-course/ under the ‘Tuition Prices’.

    1) I can’t seem to get rid of that 1px black border at the top. I tried finding solution online (including this forum) but everything I tried is giving me either the border at the top, or at the bottom. The current CSS code that I have is:

    #supsystic-table-1 {
    border-top: none;
    border-bottom: none;
    }

    Oddly enough, if I change the first line of the above code to ‘table#supsystic-table-1 * {‘, it will give me the border at the bottom instead of the top.

    2) I have a problem with column order on the mobile version. There are 5 ‘weeks’ columns followed by 5 ‘price’ columns. I understand that this is happening because it reads the table as A1, A2…A5, B1, B2 etc. I was wondering if there is a way of changing that order to A1, A2, B1, B2.

    Many Thanks
    Jack

    #16178
    mila_support
    mila_support
    Keymaster

    Hi @admin136089

    Thank you for contacting us about Data Tables questions.

    1. Your issue was redirected to our developer. I will inform you about the progress.

    2. Try to use the Horizontal Scroll Responsive Mode at the Design Tab of Table Settings.

    #16182
    mila_support
    mila_support
    Keymaster

    Hi

    Please insert the next code to hide the top line:

    where 237 – is your table id.
    On the CSS tab of your table – http://prntscr.com/hq9ngl

    #16192

    admin136089
    Participant

    Dear Mila

    Thank you for a prompt reply.

    I started with adding the code to the CSS tab and it worked brilliantly!

    I then changed to horizontal scroll and the table looks decent on a mobile phone but the top and the bottom border is back :(.

    Any ideas how I could adjust the CSS code?

    Best Wishes
    Jack

    #16224

    admin136089
    Participant

    Dear Mila

    I received a reply e-mail from you today but I can’t see that singular post in this topic. I imagine it was a mistake, as the e-mail read:

    I’m sorry for a long delay.

    Please provide the screenshot with detailed description where you want social share buttons be.

    And provide the code, you want to work there.

    The problem that I am currently having is that I switched the view of the table to ‘horizontal’, and the border at the top and bottom of the table is back. The above code suggestions do not work.

    Best Wishes
    Jack

    #16225
    mila_support
    mila_support
    Keymaster

    Hi @admin136089

    Yes, it was a mistake. I’m sorry.

    About your question – the issue was redirected to our developer and I will inform you about the progress.

    #16237
    mila_support
    mila_support
    Keymaster

    Hi @admin136089

    I’m sorry for a long delay

    Please replace this –

    with this code

    Happy Holidays!

    #16258

    admin136089
    Participant

    Dear Mila

    Unfortunately changing the above code does not work :(.

    I am stuck with 1px, black border at both top and the bottom.

    Any code that I have tried after switching to horizontal layout doesn’t seem to work, beforehand I could at least remove either the top border or the bottom.

    I am pasting this image in case I am doing something wrong:

    As you can see under this address, the table is still there:

    General English Course

    Best Wishes
    Jack

    #16309
    mila_support
    mila_support
    Keymaster

    Hi @admin136089

    Please use

    this will solve the issue.

    #19614

    admin136089
    Participant

    Hello guys

    I wasn’t sure if I should start a new post or continue with the current one but I am still experiencing the issue with 1px border at the top and bottom of my tables.

    The website is https://www.loxdale.com/general-english-course/

    I noticed that you now have article regarding this issue but unfortunately the solution there did not work for me:

    Remove Lines Above & Under The Table

    I was just trying to play with it again, and I tried several different combinations based on the most recent reply:

    .supsystic-table thead th {
    border-bottom: none !important;
    }

    I tried this with ‘#’ instead of ‘.’ but also:
    – ‘border-top: none’, ‘border-bottom: none’ and ‘border: none’. Together and in separate strings
    – I tried playing with thead th and thead td
    – with and without !important

    I also tried solution I found here: https://supsystic.com/topic/remove-top-border/, but to no effect.

    Funnily, the most recent solution posted by Milla elimitaes the top border, even though the code say border-bottom.

    Many Thanks
    Jack

    #19643
    Ole_Support
    Ole_Support
    Moderator

    Please contact us through our 
    internal support.
    We will help you to solve the problem.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

Get plugins bundle today and save over 80%