Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 21, 2015 at 6:05 pm #540190
    Cenabarato

    I used the advanced editor Enfold.

    I created a table with 3 columns to add a button in each column.
    The table looks perfectly at the desktop view but if I change the view of mobile (responsive) the first row disappears.

    I tried adding the first empty row but not the second row of the table shown in the responsive mode.

    I also need to merge cells in a table of the advanced editor (colspan in HTML) how can I get it?

    Thank you.
    A greeting.

    November 21, 2015 at 8:32 pm #540237
    Elliott

    Hey Cenabarato!

    I don’t think a table would be good for this. How about using the column shortcodes, 1/3 + 1/3 + 1/3 with buttons or icon boxes inside? That would display better and then will stack on top of each other on mobiles.

    If you want to keep using the tables then send us a link to your page and we’ll take a look.

    Best regards,
    Elliott

    November 24, 2015 at 1:22 am #541284
    Cenabarato

    Hi Elliot,

    Thanks for your reply.

    In this case you can apply the solution you told me.

    But now I have created another table to display various data and passes me the same problem.
    In the desktop view all columns and rows are.
    But in the mobile view the first row is not displayed. (3 cells are lost in the first row).
    I attach the URL of the page where you can check this problem.

    Thanks for your help

    November 24, 2015 at 6:43 pm #541860
    Elliott

    Hi!

    Add this to your custom CSS.

    .responsive .avia_responsive_table .avia-data-table .avia-button-row, .responsive .avia_responsive_table .avia-data-table tr:first-child th { display: block !important; }

    Best regards,
    Elliott

    November 24, 2015 at 10:55 pm #542027
    Cenabarato

    Hi Elliott,

    Thanks for your help. It’s works correctly.
    Note: I add the @media for the code only for the mobile devices.

    `@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: block !important; }
    }

    thanks
    Regards!

    November 25, 2015 at 8:28 am #542193
    Rikard

    Hi,

    Great, glad you got fixed :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.