Support » Plugin: CSV to Responsive Tables » Crashed display in mobile

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author lizeipe

    (@lizeipe)

    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

    Plugin Author lizeipe

    (@lizeipe)

    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.

    Plugin Author lizeipe

    (@lizeipe)

    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; 
    		}
    	}
    Thread Starter penalonga

    (@penalonga)

    Hi, Lizeipe

    Thx, I will try it next weekend

    Penalonga

    Thread Starter penalonga

    (@penalonga)

    Liz:

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

    Great !!!

    Penalonga

    Plugin Author lizeipe

    (@lizeipe)

    Thanks

    Pearl

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Crashed display in mobile’ is closed to new replies.