Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #193556

    Hi, I have a table with two columns each column has a header row. All looks fine on regular monitor but on mobile phone the first row header is missing and the second column header appears instead.
    first column header is “SIZE” second column header is “MATERIALS”.

    For mobile device how do I get the first Column header “SIZE” to appear above first column and move the second column header “MATERIALS” to be above second column?

    I prefer to display both column headers but it would be okay to display Just the first column header “SIZE” where MATERIALS appears now.

    Otherwise my last choice is to hide the second column header on mobile phone. What is the css to hide the second column header from displaying on mobile?

    See:

    http://elwoodtemp.com/portfolio-item/p21-high-performance-spherical-disc-valve/

    Thank you

    #193728

    Hey edebe!

    We can’t seem to fix this issue yet. We suggest to disable the responsive css coding for table on mobile view. Edit css > shortcodes.css find this code on 1203:

    @media only screen and (max-width: 767px)
    {
    	.responsive div .avia-data-table table,
    	.responsive div .avia-data-table tbody,
    	.responsive div .avia-data-table tr,
    	.responsive div .avia-data-table td,
    	.responsive div .avia-data-table th{display:block; border-top:none; border-right:none; border-left:none; text-align: center;}
    	.responsive .avia-data-table{border-style:solid; border-width: 1px;}
    	.responsive .avia-data-table .avia-pricing-row .avia-desc-col{text-align: center;}
    	.responsive .avia-data-table .avia-button-row, .responsive .avia-data-table tr:first-child th{display:none;}
    	.responsive .avia-data-table td:before {
    	display:block;
    	font-style: italic; font-size: 11px;
    	}
    
    	.responsive .avia-data-table td {
    		position: relative;
    	}
    }

    We might need to adjust the width of the table after.

    Best regards,
    Ismael

    #195106

    Great, thank you disabling the responsive css code for table on mobile view worked for my purposes.

    #195132

    Hey!

    Glad it worked. I just thought that we should adjust the width. :)

    Best regards,
    Ismael

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

You must be logged in to reply to this topic.