Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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 2 months, 1 week ago by beverlystone. Reason: typo
    #1433956

    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

    #1433958

    That works perfectly! Thank you.

    #1433960

    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 2 months, 1 week ago by beverlystone. Reason: Additional details
    #1433993

    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

    #1434018

    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;
    }

    #1434021

    Hi,
    I logged into your site and review your css and found the error, your comment error disabled a large section of css:
    Enfold_Support_4683.jpeg
    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

    #1434026

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

    #1434028

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Table Header Loses Stying on Mobile’ is closed to new replies.