wpForo Layout Problem on Mobile

Shapely
1

Hello,
I am not sure this is the place to ask about another plugins integration with the theme but, as wpForo was one of the colorlib suggested forum plugins and it is the one that looks the best imo, I chose it. It works and looks perfect on desktop, however when switched to tablet or mobile view, everything gets cluttered. You can see what I mean below:

What it should look like (desktop view):
desktop view

What it looks like on tablet:
tablet view

What it looks like on mobile:
mobile

Now I couldn’t find any page that uses wpForo with shapely therefore I have no idea if some setting in the theme might be cauising this. Upon writing this issue in wpForo forums, I received a reply telling that some plugin is in conflict with the wpForo style and it is “hard to check all classes and find conflict points”. Yet, I have diabled and re-enabled almost all the plugins since then and none of them did the trick. I am using very regular plugins that don’t really have anything on page style anyway. So I thought you guys might have a tip, a css code, some trick up your sleeves on how to get this fixed… I have tried changing the page style to all available but none affected the mobile view.
The address of the page is https://www.catcryptobot.com/community/
I am also willing to create an admin user to anyone from support in here as well in case you’d want to take a closer look.
Thanks in advance :slight_smile:

2

Hello there,

I had a look at the page and it appeared to be fine.

What device and screen size are you using to test this?

Best Regards,
Support

3

Yes you don’t see it because I got it fixed to a pro… :slight_smile:

Here’s the solution he did:

  1. Install Simple CSS
  2. In the Appearance Customize menu -> Simple CSS:
#shapely_home_contact-2 .text-center h2 {
    color: #0e1015;
}
@media all and ( max-width: 767px ){
	#wpforo-wrap .wpfl-1 .wpforo-forum-info, #wpforo-wrap .wpfl-1 .cat-title, #wpforo-wrap .wpfl-3 .cat-title{
		float: none
	}
    .wpforo-post-head::before, .wpforo-post-head::after {
        content: "";
        clear: both;
        display: table;
    }
}
4

Hello there,

Nice work, you go it fixed before I loaded the page.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support