Table Header Loses Stying on Mobile - Support | Kriesi.at

Tagged: Header Row, mobile, style, table

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

Author

Posts
February 10, 2024 at 12:31 am #1433872
beverlystone
Participant
I am using the table element on a number of pages and portfolio items. It looks fine on desktop but on mobile the header row either disappears or doesn’t hold its styling. I’ve added a screen cap just below the table at the URL in the private content to demonstrate the issue.
- This topic was modified 9 months, 1 week ago by beverlystone. Reason: typo
February 10, 2024 at 11:29 pm #1433956
Mike
Moderator
Hey beverlystone,
Thank you for the link to your site and the screenshot, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
@media only screen and (max-width: 767px) {
.responsive .avia_responsive_table .avia-data-table tr:first-child th {
    display: block;
}
.responsive .avia_responsive_table .avia-data-table td:before {
	display: none;
}
}
```
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
February 10, 2024 at 11:35 pm #1433958

beverlystone
Participant

That works perfectly! Thank you.

February 11, 2024 at 12:05 am #1433960
beverlystone
Participant
Am I allowed a second and related question?

If I want to make the header (th) of the second table a different color like red, how would I modify the CSS? I currently have the CSS below to color the headers the same green #70bf4f.

I added a custom class: not-accepted to the second table. Where do I add the custom class “.not-accepted” to the CSS below?

The reason for this is because the tables work best in mobile if they are separate. Otherwise both headers stack first and then the data so it’s confusing for the user.

/*Avia Table*/
#top .avia-table td, #top .avia-table tr, #top .avia-table th, #top .avia-table tr th:first-child, #top .avia-table tr td:first-child {border-color: #000;}

#top .main_color .avia-data-table.avia_pricing_minimal td {color: #000; font-size: 15px;}

#top .main_color .avia-data-table.avia_pricing_minimal th {
background-color: #70bf4f; color: white; text-align: left;
}

table.avia_pricing_minimal td {
text-align: left !important;
}

#top .fullsize .template-blog .post .entry-content-wrapper {
text-align: left;
}
- This reply was modified 9 months, 1 week ago by beverlystone. Reason: Additional details
February 11, 2024 at 2:06 pm #1433993
Mike
Moderator
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
#top .main_color .avia-data-table.avia_pricing_minimal.not-accepted th {
background-color: red; color: white; text-align: left;
}
```
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
February 11, 2024 at 7:33 pm #1434018

beverlystone
Participant

Almost! I’ve lost the green header with the addition of the new CSS. Also, in order to make this work, too, I had to stick it in the middle of my old CSS.

/*Avia Table*/
#top .avia-table td, #top .avia-table tr, #top .avia-table th, #top .avia-table tr th:first-child, #top .avia-table tr td:first-child {border-color: #000;}

#top .main_color .avia-data-table.avia_pricing_minimal td {color: #000; font-size: 15px;}

#top .main_color .avia-data-table.avia_pricing_minimal. th {
background-color: #70bf4f; color: white; text-align: left;
}

/*Avia Table Not Accepted Custom CSS for Red Header*/
#top .main_color .avia-data-table.avia_pricing_minimal.not-accepted th {
background-color: #FF0000; color: white; text-align: left;
}

table.avia_pricing_minimal td {
text-align: left !important;
}

#top .fullsize .template-blog .post .entry-content-wrapper {
text-align: left;
}

February 11, 2024 at 8:14 pm #1434021

Mike
Moderator

Hi,
I logged into your site and review your css and found the error, your comment error disabled a large section of css:

in the screenshot all of the green css is disabled my the misplaced comment. I corrected it for you, please clear your browser cache and check.

Best regards,
Mike

February 11, 2024 at 9:16 pm #1434026

beverlystone
Participant

OMG – that is so embarrassing! Thank you very much. I’m good and we can close this ticket.

February 11, 2024 at 9:31 pm #1434028

Mike
Moderator

Hi,
Don’t be embarrassed, it can happen to the best of us :) 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