How to adjust Responsive Table Coloumn Width

This thread is resolved. Here is a description of the problem and solution.

Problem:
I want to adjust this table coloumn width in mobile view.
Solution:
Add the following CSS in your theme’s style.css file or custom CSS file:

@media(max-width:768px){
    #wpv-view-layout-6306-TCPID4426 .table-responsive > .table > thead > tr > th, 
    #wpv-view-layout-6306-TCPID4426 .table-responsive > .table > tbody > tr > th, 
    #wpv-view-layout-6306-TCPID4426 .table-responsive > .table > tfoot > tr > th, 
    #wpv-view-layout-6306-TCPID4426 .table-responsive > .table > thead > tr > td, 
    #wpv-view-layout-6306-TCPID4426 .table-responsive > .table > tbody > tr > td, 
    #wpv-view-layout-6306-TCPID4426 .table-responsive > .table > tfoot > tr > td {
        white-space: normal !important;
    }
}

Relevant Documentation:

This support ticket is created 6 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	-
-	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: Classifieds reference, Reference sites

This topic contains 2 replies, has 2 voices.

Last updated by koheiY 6 years, 10 months ago.

Assisted by: Noman.

Author

Posts

February 8, 2018 at 4:12 am #614057

koheiY

Please see this URL by mobile devices (for example iphone7).
hidden link

The column "Listing Title" has a long text data and it's difficult for visitors to scrool all to right edge.
I want to adjust this table coloumn width without reset responsive tables.

February 8, 2018 at 9:17 am #614140

Noman

Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting Toolset support. You can fix this issue by adding following CSS in your theme’s style.css file or custom CSS file.

@media(max-width:768px){
	#wpv-view-layout-6306-TCPID4426 .table-responsive > .table > thead > tr > th, 
	#wpv-view-layout-6306-TCPID4426 .table-responsive > .table > tbody > tr > th, 
	#wpv-view-layout-6306-TCPID4426 .table-responsive > .table > tfoot > tr > th, 
	#wpv-view-layout-6306-TCPID4426 .table-responsive > .table > thead > tr > td, 
	#wpv-view-layout-6306-TCPID4426 .table-responsive > .table > tbody > tr > td, 
	#wpv-view-layout-6306-TCPID4426 .table-responsive > .table > tfoot > tr > td {
		white-space: normal !important;
	}
}

And it will look as in attached screenshot.

Thank you

February 9, 2018 at 5:21 am #614522

koheiY

Thank you! It's perfect!