How can I make a page responsive in cell phones?

Hi, my page looks great in the desktop browser, but the page does not look properly in the membership list like the following picture in cell phones.

Could you help me make the membership list responsive?
Thank you.

  • Adam Czajczyk

    Hello Jeonghun,

    I hope your're well today and thank you for your question!

    I checked your site and the part you are referring to is a HTML table. It is responsive down to some screen width but below that it doesn't shrink anymore.

    It seems that this is because there's a certain amount of data that simply wouldn't fit smaller screens so it's been set that way it would keep all the data for each record still in the same line.

    I think we could make it "more responsive" but I would need to get some direction from you on how would you like it to act. What I'm asking about is that from some resolution down, it may be not possible to keep the data in a single row. Therefore, the question is:

    - should we make fonts slower?
    - should the table "break" in some way and if yes, in what way?

    If you could provide me with a simple sketch/drawing of how would you like it to look like on mobile devices, I'll be happy to help you tweak it as much as I can.

    Best regards,
    Adam

  • Dimitris

    Hello Jeonghun and happy new year! :slight_smile:

    Could the page be made to behave in this way that describes responsive table?

    This seems to come from this article
    https://css-tricks.com/responsive-data-tables/

    Inspecting the table in your website and the CSS snippet there, I came up with the following snippet.

    /*
    https://css-tricks.com/responsive-data-tables/
    Generic Styling, for Desktops/Laptops
    */
    #participants-list-1 table.wp-list-table {
      width: 100%;
      border-collapse: collapse;
    }
    /* Zebra striping */
    #participants-list-1 table.wp-list-table tr:nth-of-type(odd) {
      background: #eee;
    }
    #participants-list-1 table.wp-list-table th {
      background: #333;
      color: white;
      font-weight: bold;
    }
    #participants-list-1 table.wp-list-table td, th {
      padding: 6px;
      border: 1px solid #ccc;
      text-align: left;
    }
    
    /*
    Max width before this PARTICULAR table gets nasty
    This query will take effect for any screen smaller than 760px
    and also iPads specifically.
    */
    @media
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {
    
    	/* Force table to not be like tables anymore */
    	#participants-list-1 table.wp-list-table, #participants-list-1 table.wp-list-table thead, #participants-list-1 table.wp-list-table tbody, #participants-list-1 table.wp-list-table th, #participants-list-1 table.wp-list-table td, #participants-list-1 table.wp-list-table tr {
    		display: block;
    	}
    
    	/* Hide table headers (but not display: none;, for accessibility) */
    	#participants-list-1 table.wp-list-table thead tr {
    		position: absolute;
    		top: -9999px;
    		left: -9999px;
    	}
    
    	#participants-list-1 table.wp-list-table tr { border: 1px solid #ccc; }
    
    	#participants-list-1 table.wp-list-table td {
    		/* Behave  like a "row" */
    		border: none;
    		border-bottom: 1px solid #eee;
    		position: relative;
    		padding-left: 50%;
    	}
    
    	#participants-list-1 table.wp-list-table 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;
    	}
    
    	/*
    	Label the data
    	*/
    	#participants-list-1 table.wp-list-table td:nth-of-type(1):before { content: "Name"; }
    	#participants-list-1 table.wp-list-table td:nth-of-type(2):before { content: "State"; }
    	#participants-list-1 table.wp-list-table td:nth-of-type(3):before { content: "City"; }
    	#participants-list-1 table.wp-list-table td:nth-of-type(4):before { content: "Zip"; }
    	#participants-list-1 table.wp-list-table td:nth-of-type(5):before { content: "Email"; }
    	#participants-list-1 table.wp-list-table td:nth-of-type(6):before { content: "position"; }
    	#participants-list-1 table.wp-list-table td:nth-of-type(7):before { content: "Affiliation"; }
    	#participants-list-1 table.wp-list-table td:nth-of-type(8):before { content: "More"; }
    }

    Feel free to use this either via your theme options (if provide a custom CSS section) or through a plugin like this.

    If you find yourself struggling after that, please grant us support access to your site via WPMUDEV Dashboard plugin as described here https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/
    and point to us where have you put the CSS snippet.

    Warm regards,
    Dimitris

  • Jeonghun

    Hi, @dimitris_kalliris. I am amazed at what you programmers can do. I admire you guys and I really appreciate your help!!
    Dimitris, your solution is perfect when there is no empty cells in the directory, but when there are empty cells, the directory is viewed not perfectly in the mobile phones like the following picture.

    Dimitris, is there any way that the directory can be viewed all right in the cell phones even when there is empty information in the table cell? This is the site page.

    Thank you very much and Happy New Year!!

  • Predrag Dubajic

    Hi Jeonghun and happy new year! :slight_smile:

    In Dimitris' code above there's this part:

    #participants-list-1 table.wp-list-table td, th {
      padding: 6px;
      border: 1px solid #ccc;
      text-align: left;
    }

    Add min height of 50 pixels and that should do the trick, the code will now look like this:

    #participants-list-1 table.wp-list-table td, th {
        padding: 6px;
        border: 1px solid #ccc;
        text-align: left;
        min-height: 50px;
    }

    Let us know if it looks good after that.

    Best regards,
    Predrag