Notifications
Clear all

[Solved] Trouble with my forum's height and width

6 Posts
2 Users
1 Likes
476 Views
Posts: 4
Topic starter
(@asddsaasd)
Active Member
Joined: 2 years ago

Hi there!

First of all, I am really happy with the wpForo plugin for my Wordpress website.
It works great, looks great, and most importantly, it's free to use. 😛

Anyway...

I'm having trouble adjusting the forum's height & width to match my website's layout. To illustrate my point, I've attached a picture file to this post.

First I tried to fix this problem by using Elementor, which worked for the desktop version, but it messed up the mobile version of my website. So Elementor was not an option for me.

Then I tried using custom CSS code in wpForo's Colors & Styles section with the following code:

#wpforo-wrap{
font-size: 13px; width: 100%; padding: 40px 0; margin: 0px;
}

This custom CSS code was already there, but I changed the number to 40 so that the top and bottom of my forum would have more white space. The height problem was fixed for me on the desktop version of my website, but not for the mobile version, as the blank space isn't visible there for some reason.

Question 1: how do I add white space on the top and bottom of my forum, which is visible on desktops, tablets, and mobile devices?

Question 2: How do I make the width of my forum smaller, so that it matches the layout of my website? See the picture I have attached to this post.

Basically, does anyone know of a CSS code that fixes all of my problems simultaneously?

Thank you for your time (and help). 🙂

5 Replies
Posts: 4
Topic starter
(@asddsaasd)
Active Member
Joined: 2 years ago

Woops, I believe that I posted this in the wrong forum section... Sorry about that!

Chris
Posts: 3650
(@chris)
Famed Member
Joined: 3 years ago

Hi @ventiskie,

you have posted in the right place.

Please provide forum URL.

Posts: 4
Topic starter
(@asddsaasd)
Active Member
Joined: 2 years ago

Whaha oh, it appears that I am clueless. 😂

My forum is located at: *private*

Currently, the website is pretty empty, but I am just getting started. 😊 

1 Reply
Chris
(@chris)
Joined: 3 years ago

Famed Member
Posts: 3650

@ventiskie,

Insert the below CSS Code in Custom CSS Code Field from Dashboard > wpForo > Settings > Colors & Styles:

.elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding: 15px;
}
Posts: 4
Topic starter
(@asddsaasd)
Active Member
Joined: 2 years ago

That little piece of code fixed literally everything I wanted! I'm not sure how it worked, but it did. 🤣 

Thank you very much, It's nice to know that there are smart people like you in this world, because I have tried everything and nothing worked. Consider my problem solved. 😛 Have a great day!