Tagged: Header Row, mobile, style, table
-
AuthorPosts
-
February 10, 2024 at 12:31 am #1433872
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 8 months ago by beverlystone. Reason: typo
February 10, 2024 at 11:29 pm #1433956Hey 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,
MikeFebruary 10, 2024 at 11:35 pm #1433958That works perfectly! Thank you.
February 11, 2024 at 12:05 am #1433960Am 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 8 months ago by beverlystone. Reason: Additional details
February 11, 2024 at 2:06 pm #1433993Hi,
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,
MikeFebruary 11, 2024 at 7:33 pm #1434018Almost! 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 #1434021February 11, 2024 at 9:16 pm #1434026OMG – that is so embarrassing! Thank you very much. I’m good and we can close this ticket.
February 11, 2024 at 9:31 pm #1434028Hi,
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 -
AuthorPosts
- The topic ‘Table Header Loses Stying on Mobile’ is closed to new replies.