th text changed to image and italics in mobile view

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

Author

Posts
June 16, 2024 at 12:04 am #1450864

dburton77
Participant

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
Moderator
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
Participant

Awesome! Thank you, Mike.

June 16, 2024 at 7:35 pm #1451394

Mike
Moderator

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.