I use the BBP-Style-Pack and am looking to see if there is any CSS I can use to change Forum Display List from Horizontal to Vertical for Mobile views (devices)

Ref: BBP-Style-Pack > Forum Display > Forum List > (Change to Column List)

[@robin-w Moderator 3 months, 4 weeks ago]

not sure what you are after, it does exactly that on my test site.

Link to an example please

[@uksentinel Participant 3 months, 4 weeks ago]

Hi Robin
Your test forum I believe is arranged as bbp style pack > Forum Templates > Alternate Forum template 1
My Forum is arranged as bbp style pack > Forum Templates > Default Forum Template > Click to Select
Then under bbp style pack > Forum Display > (Item 1 checkbox is not Selected)

My Forum presents all Forums in a horizontal format, which is great for views on Desktop / PC etc.
But what I am looking to achieve is to change that horizontal format to a vertical format when somebody views my forums on a mobile device < 400 dpi.

Horizontal View Mobile
https://uktechhub.com/wp/wp-content/uploads/2024/08/horizontal-view.png

Vertical View Mobile
https://uktechhub.com/wp/wp-content/uploads/2024/08/vertical-view.png

Horizontal View when bbp style pack > Forum Templates > Default Forum Template > Click to Select
And looking to change this view to Vertical for mobile screens
https://uktechhub.com/wp/wp-content/uploads/2024/08/horizontal-view-template-horizontal.png

My Site URL: https://uktechhub.com/forums/

[@robin-w Moderator 3 months, 4 weeks ago]

it works on both templates for me.

so when I go to your last link (my site url) I see the forums in list view (NOT vertical) on both a laptop and a mobile.

Do you see differently?

[@uksentinel Participant 3 months, 4 weeks ago]

I do not see differently, Currently I see list view for both Mobile and Laptop.

Ideally looking to change only mobile view to VERTICAL so my Forum icons all line up exactly like Vertical View Mobile above.

Hope that makes sense.

[@uksentinel Participant 3 months, 1 week ago]

So finally worked out how to achieve as above using the below CSS. and hopefully this helps others.

Now just have to remove some pesky comma’s from sub forums list display that have appeared.

/* small devices (phones, 400px and down) */

@media only screen and (max-width: 400px) {

a.bbp-forum-link {
display : block !important ;
}