Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 19, 2019 at 9:59 pm #1120355
    elspanko

    Hi,

    I have a table that displays officers for an organization. There are 3 columns. When viewed in a desktop browser the table appears normally. When the same page is viewed on a mobile device the information in the first cell appears to be added to the information in each of the second column cells.

    The table is set up as used to display tabular data, default design, and to adjust table to screen size. From left to right the columns are set as description, highlight, and default although the symptom remains regardless of how they are configured.

    You can view the symptom at the link. As you can see, everyone gets to be “President”

    July 21, 2019 at 2:12 am #1120541
    Mike

    Hey elspanko,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
.avia-table-1 td:nth-of-type(1):before {
    content: '' !important; 
}
}

    Best regards,
    Mike

    July 21, 2019 at 8:56 am #1120573
    elspanko

    Hi Mike,
    Thanks so much for your prompt help. I’ve added the code you provided and it resolved the issue. I neglected to point out the same issue affected a second table further down the page. I added the same code you listed above and changed .avia-table-1 to .avia-table-2 and it appears to have fixed the second table as well. Is that the correct way to do this?

    • This reply was modified 4 years, 9 months ago by elspanko.
    July 21, 2019 at 1:03 pm #1120611
    Victoria

    Hi elspanko,

    Glad you got it working for you! :)

    Yes, it is a way to do it.

    If you need further assistance please let us know.

    Best regards,
    Victoria

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