Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 2, 2019 at 11:57 pm #1124285
    photographie-tous-azimuts

    I have a 2-column table that shows OK on large screens. On small screen, Enfold tries to interleave columns but does not do it correctly. The first column of the first row is duplicated on every other row. I can reproduce the problem simply by narrowing the browser window or using mobile simulation mode.

    August 6, 2019 at 10:29 pm #1125301
    Basilis

    Hey photographie-tous-azimuts,

    When you load it from your mobile phone, how does it look?

    Best regards,
    Basilis

    August 6, 2019 at 10:36 pm #1125306
    photographie-tous-azimuts

    I cannot test it directly on my mobile because I need to change the hosts file to access the dev site. But if I resize the window to make it narrower, I have the same problem. As soon as the window is too narrow to display 2 columns, the problem occurs.

    August 8, 2019 at 10:54 am #1125874
    Ismael

    Hi,

    Thank you for the update.

    You can configure the column layout on mobile view in the elements’ Screen Options. Have you tried that?

    Can we access the site without adding the host file? Please let us know once the site is ready so that we can inspect the issue.

    Best regards,
    Ismael

    August 9, 2019 at 12:35 am #1126078
    photographie-tous-azimuts

    Hi,

    The table contains 2 columns. The first one is set to Description (I translate from French) and the second one is Normal. Here is the shortcode for the table (I did fetch it from a WordPress Export, is there an easier way?):

    [av_table purpose='tabular' pricing_table_design='avia_pricing_default' pricing_hidden_cells='avia_show_empty_cells' caption='' responsive_styling='avia_responsive_table' av_uid='av-4o1r68' custom_class='']
    [av_row row_style=''][av_cell col_style='avia-desc-col']Durée[/av_cell][av_cell col_style='']7 heures[/av_cell][/av_row]
    [av_row row_style=''][av_cell col_style='avia-desc-col']Formateur[/av_cell][av_cell col_style='']Nostradamus[/av_cell][/av_row]
    [av_row row_style=''][av_cell col_style='avia-desc-col']Taille du groupe[/av_cell][av_cell col_style='']5 à 8 participants.[/av_cell][/av_row]
    [av_row row_style=''][av_cell col_style='avia-desc-col']Lieu de l’atelier[/av_cell][av_cell col_style='']Lofts Sherwill.[/av_cell][/av_row]
    [av_row row_style=''][av_cell col_style='avia-desc-col']Préalables[/av_cell][av_cell col_style='']Maîtrise de la lumière 1.[/av_cell][/av_row]
    [av_row row_style=''][av_cell col_style='avia-desc-col']Matériel requis[/av_cell][av_cell col_style='']Appareil photo et objectifs. Une grenouille. Un cheval pour le retour du prince charmant.[/av_cell][/av_row]
    [av_row row_style=''][av_cell col_style='avia-desc-col']Objectifs suggérés[/av_cell][av_cell col_style='']70-200mm, 50mm, macro ou leur équivalent APS-C ou micro 4/3.[/av_cell][/av_row]
    [av_row row_style=''][av_cell col_style='avia-desc-col']Prix[/av_cell][av_cell col_style='']129 $[/av_cell][/av_row]
    [av_row row_style=''][av_cell col_style='avia-desc-col']Prochain cours[/av_cell][av_cell col_style=''][events_list tag=”photo-philosophale”]#_EVENTDATES{bookings_open} – #_EVENTTIMES{/bookings_open}{bookings_closed} – complet{/bookings_closed}
    [/events_list][/av_cell][/av_row]
    [/av_table]

    The problem also occurs if I use the WP preview feature to use the strait Enfold theme.

    The site has no DNS entry at this time. It has dev status. It is planned to go live in a manner of weeks.

    Best regards,

    Serge

    August 12, 2019 at 12:56 am #1126688
    Mike

    Hi,
    Sorry for the late reply and thanks for the shortcode from your table, first you ask if there is an easier way to get your shortcodes, and using the Avia Layout Builder Debugger would be easier to get and share your code. The function in the link will create a box under your builder with the page shortcodes:
    2019-08-11-181951
    Anyways, I have seen this before and it is explained that for mobile devices with large complex tables this would make it easier to read as you scrolled down. But we can correct this with css. I tried adding your site to my hosts file but it didn’t work without rebooting, which I can’t do right now, so normally I would include a page ID and maybe a section ID, but this will work as-is. Please add this to your Quick CSS and then clear your browser cache and any cache plugin, and check.

    @media only screen and (max-width: 767px) { 
.avia-table td:before {
	display: none !important;
}
}

    Best regards,
    Mike

    August 12, 2019 at 3:34 am #1126698
    photographie-tous-azimuts

    Hi,

    Thanks for the tip to get access to shortcode.

    With the QuickCSS fix applied, the result is way closer but still not completely fixed. Now, the first column of the first row completely disappeared. This is better than being duplicated in italic style at every other row, but it should appear once on the first row.

    Best regards,

    Serge

    August 13, 2019 at 4:16 am #1127056
    Mike

    Hi,
    Sorry, please try this instead:

    @media only screen and (max-width: 767px) { 
.avia-table td:before {
	display: none !important;
}
.avia-data-table tr:first-child th {
    display: block !important;
}
}

    Best regards,
    Mike

    August 13, 2019 at 4:46 am #1127058
    photographie-tous-azimuts

    Hi,

    This one did the trick! Works fine now. Thanks!

    Few questions:

    1. Is this a general fix or only for this particular table setup?
    2. May it cause problems with other tables?
    3. May some future Enfold update break my table?

    Just to know if I need to pay particular attention to my tables when updating Enfold…

    Bests regards,
    Serge

    August 13, 2019 at 8:07 am #1127094
    Mike

    Hi,
    Glad to hear it’s working for you.
    This is a general fix because I still can not see your site, the hosts file edit doesn’t seem to be working for me, although this has worked for me with other sites. Please try adding a custom class to the table or add the page ID to the beginning of the rules so this css will only apply to this one table. Please let us know if you would like to see an example on how to do this.
    Future updates will not break this css as long as you have placed it in the Quick CSS field or your child theme stylesheet, if future updates change the table element then this css will do nothing so you should have nothing to worry about.

    Best regards,
    Mike

    August 13, 2019 at 5:23 pm #1127298
    photographie-tous-azimuts

    Hi,
    The Enfold documentation gives examples about how to change table style globally but not for using a custom CSS class applied to a specific table. When I code a table manually using HTML, I need to specify the custom class name for all elements (table, tr, th, td), but the code generated by Enfold specify the class name only for the table element, and this has no effect.
    Unless we hit a major roadblock, the site should go live before the end of the week.

    Best regards,
    Serge

    August 14, 2019 at 8:10 am #1127507
    Mike

    Hi,
    To add a custom class to the table please ensure that the option is enabled at: Enfold Theme Options > Layout Builder > Show element options for developers this will add the “custom css class” field to the table element:
    2019-08-14-020030
    For this example we will add the class “table_one”, note that we don’t include the dot.
    Then we will adjust the css like this:

    @media only screen and (max-width: 767px) { 
.table_one.avia-table td:before {
	display: none !important;
}
.table_one.avia-data-table tr:first-child th {
    display: block !important;
}
}

    Please give this a try.

    Best regards,
    Mike

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