[Resolved] Business Listing View – Can i swithc to a list view

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.

This topic contains 4 replies, has 2 voices.

Last updated by Luo Yang 2 months, 1 week ago.

Assigned support staff: Luo Yang.

Author
Posts
#1610833

I have has some amazing support setting up this list for our website....

hidden link

which now looks great and works really well for us. BUT we would like to create a list view of this so people can switch if possible?

hidden link I created this list, i have a couple of small issues below....

1. Headers for each column. If i put it within the view it repeats above every entry, so put it above and hid from mobile view as it stacks..... assume thats right...
2. In mobile view it stacks the columns which is fine but how do i reduce the gap between each record?

Lastly... and the main question, can i set my main view on the first link to also have this layout and a dropdown so people can view as tumbs or as this list or shoul di just add a link to the 2nd page?

Thanks

Neil

#1611931

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Dear Neil,

Q1) You are right, since in mobile, the table header row will not be useful, and will break the layout, so it is hidden with CSS codes:

@media only screen and (max-width: 599px)
.tb-container[data-toolset-blocks-container="e0eab7be06ff409e32a3752e44d3be79"] {
    display: none;
}

You can setup CSS codes to override it, and display those table headers.

Q2) You can use CSS codes to reduce the gap, for example:

div.wp-block-columns {
    margin-bottom: 0px;
}

Q3) I assume you are going to switch the View block layout by a drop down menu, if it is, there isn't such kind of built-in feature with Toolset Blocks/Views plugin, you are right, as a workaround, you can add a link to 2nd page.

#1612997

My issue is resolved now. Thank you!

#1612999

Apologies on question 2 will this CSS just adjust the mobile view?

#1613251

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

On question 2, the CSS codes I provided will take effect on both desktop and mobile devices, if you want to take effect only on mobile, you can try below CSS codes:

@media only screen and (max-width: 599px){
div.wp-block-columns {
    margin-bottom: 0px;
}
}

More help:
hidden link