Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 13, 2024 at 7:34 am #1464510
    DianaLoola73

    Dear Support Team

    I have the following problem with the tables in the mobile view of the following section on this website: http://neu2024.heilpraktiker-wittmann.de/#indikationen
    There are 2 columns in each of which a table is placed. Each table consists of 2 columns, each with a label column (left) and a text column. Everything is displayed correctly on the desktop PC, but unfortunately not on the mobile phone. There are several problems here:

    1. and what surprises me the most: that these two tables are also displayed differently in the mobile view (although they are created exactly identically) :
    – Mobile phone left table view: https://osmosis.de/support/tablle-left.png >> where do these light beige boxes come from???
    – Mobile phone right table view: https://osmosis.de/support/tablle-right.png

    2. then there are also content-related problems:
    For each of the tables, the first label row is not displayed correctly and is repeated in each subsequent row: see:
    – Mobile phone left table view: https://osmosis.de/support/tablle-left1.jpg >> where do these light beige boxes come from here???
    – Mobile phone right table view: https://osmosis.de/support/tablle-right1.jpg

    My wish would be the table as in the view of the right column (i.e. without these beige boxes) and of course with a correct display of the first labelling line.

    Can you please help me?
    Best regards and many thanks in advance. Diana

    August 13, 2024 at 8:58 am #1464518
    Guenni007

    you have this css :

    .avia-table-1 td:nth-child(2) {
  width: 70%;
}

    and that only influences the first table!

    btw.: This is the by intention:

    @media only screen and (max-width: 767px) {
  .responsive .avia_responsive_table .avia-data-table .avia-button-row, .responsive .avia_responsive_table .avia-data-table tr:first-child th {
    display: none;
  }
}

    This rule hides the first header.

    August 14, 2024 at 5:39 am #1464583
    Ismael

    Hi,

    Thank you for the inquiry.

    As @Guenni007 pointed out above, the beige space is created because of the following css code: 

    .avia-table-1 td:nth-child(2) {
  width: 70%;
}

    The issue with the label is due to the table script, which repeats the first label in the first row. To fix this or to prevent the theme from repeating the first label, you can add a blank header row above the other rows.

    Best regards,
    Ismael

    August 15, 2024 at 9:13 am #1464670
    DianaLoola73

    Hello Ismael and Guenni007,

    thank you very much for your support.
    Yes, it was the wrong CSS code: I removed it and now the beige boxes are gone. Perfect

    And regarding the repeated first description text, Ismael’s tip of inserting a blank line at the top of the table worked perfectly!

    Thank you very much, my problem is solved!

    August 15, 2024 at 11:49 am #1464678
    Rikard

    Hi,

    Great, I’m glad to hear that you got things working. We’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Mobile version table view’ is closed to new replies.