Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 26, 2013 at 8:18 pm #193556
    edebe

    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

    November 27, 2013 at 6:42 am #193728
    Ismael

    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

    December 1, 2013 at 8:58 pm #195106
    edebe

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

    December 2, 2013 at 1:54 am #195132
    Ismael

    Hey!

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

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘table header’ is closed to new replies.