Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1120355

    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”

    #1120541

    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

    #1120573

    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 1 month ago by  elspanko.
    #1120611

    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

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

You must be logged in to reply to this topic.