Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 16, 2024 at 12:04 am #1450864
    dburton77

    Hi,
    I have a peculiar situation. I have multiple 3×2 tables on a page where the first row is defined as a heading row. When I view the page on mobile (breakpoint set at 1000px), the th text converts to an image and is italicized. How can I prevent that from occurring? I want the ability to style via CSS the text using a media query.

    I look forward to your reply.

    Thank you!

    June 16, 2024 at 12:56 pm #1451373
    Mike

    Hey dburton77,
    Thank you for the link to your site, for the max-width 767px the heading row is hidden and the pseudo-element :before is used so the heading is stacked instead of being in a single row.
    To style the pseudo-element try this css:

    @media only screen and (max-width: 767px) {
    .responsive .avia_responsive_table .avia-data-table td:before {
        color: #0097ff;
        font-weight: 600;
        font-size: 17px;
        font-style: normal;
    }
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    June 16, 2024 at 4:41 pm #1451387
    dburton77

    Awesome! Thank you, Mike.

    June 16, 2024 at 7:35 pm #1451394
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘th text changed to image and italics in mobile view’ is closed to new replies.