Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 30, 2013 at 10:25 pm #168411
    kangaroozach

    Hello. I have created the following page.

    http://oakparkpediatrics.com/resources/local-pharmacies/

    On a smaller browser window the table converts to a single column. This is OK, but it doesn’t do so correctly. The fields are not in the proper order. Notice how the “City” heading row does not appear on the smaller window.

    Please let me know how we can resolve this.

    Thank you.

    Zach
    (Email address hidden if logged out)

    October 1, 2013 at 5:37 am #168556
    Ismael

    Hey kangaroozach!

    Please edit css > shortcodes.css, find this code:

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

    Remove it. It will disable the responsive styling for mobile devices. I’ll get back to you after you remove it, the table might need some adjustments.

    Best regards,
    Ismael

    October 1, 2013 at 6:08 am #168571
    kangaroozach

    Thank you. I commented it out by adding “/*” before and “*/” after.

    Please let me know what next. Thanks for the fast response.

    -Zach

    October 2, 2013 at 2:35 pm #169340
    Devin

    Hello Zach!

    Looks like that did it perfectly.

    What you’ll get now however is that on mobile devices or screens that are smaller in width than the table can compress down to fit the table will overflow the browser container.

    So you can either put a note above it mentioning that mobile users will need to view the table in landscape to view the whole thing (anyone with smaller width than about 660px) or you could do something a bit more fancy and try to hide the table at widths below that and display secondary information that would only show on screen widths that size to give alternative information.

    Regards,
    Devin

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Table doesn't look right on mobile…’ is closed to new replies.