Crashed display in mobile

Hi

Thanks for using my plugin. It seems that your table contain only two columns. If you do not want that that responsive please remove the responsive css code from the pearl_csv_to_webpage.css.

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

table, thead, tbody, th, td, tr {
display: block;
}

.pearl_tblstyle thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

.pearl_tblstyle tr td {
/* Behave like a “row” */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

.pearl_tblstyle td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space:nowrap;
content : ”;
}

/*
Label the data
*/
.pearl_tblstyle td:before { content: attr(data-content);display: inline-block; }

}
/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}

/* iPads (portrait and landscape) ———– */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}

Hope this help. if you have any further queries please leave a reply.

Thanks

Liz

Hi

Thanks for using my plugin. If you do not want the table to be responsive please remove the responsive code from the pearl_csv_to_webpage.css.

Hope this help . If you have any further queries please give a reply .

regards

pearl.

I am pasting the responsive code here :

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	.pearl_tblstyle thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	
	.pearl_tblstyle tr td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.pearl_tblstyle td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space:nowrap;
                content : '';
	}
	
	/*
	Label the data
	*/
	.pearl_tblstyle td:before { content:  attr(data-content);display: inline-block; }
	
}
/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: 320px; }
		}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
		}
	}

Hi, Lizeipe

Thx, I will try it next weekend

Penalonga

Liz:

I couldnt wait so I did a fast try. It worked !

Great !!!

Penalonga

Thanks

Pearl