Notifications
Clear all

[Solved] How do I reduce the width taken by the upvote, downvote and tick buttons in QA layout?

8 Posts
2 Users
1 Likes
1,861 Views
Posts: 12
Topic starter
(@sydchako)
Eminent Member
Joined: 1 year ago

How do I reduce the width taken by the upvote, downvote and tick buttons in QA layout? They are taking about a third of the useful screen area which is too much.

wpForo Version
2.1.1
Topic Tags
7 Replies
Chris
Posts: 2778
Admin
(@chris)
Support Team
Joined: 2 years ago

Hi @sydchako,

Insert this CSS Code in Custom CSS Code Field at Dashboard > wpForo > Settings > Colors & Styles:

#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-left {
    width: 35px;
}

 

And this one for making the Forum Full width:

#main #content {
    width: 100%;
}
1 Reply
(@sydchako)
Joined: 1 year ago

Eminent Member
Posts: 12

@chris thank for the solution. However, a certain amount of padding has been introduced on the right hand side of the post content on mobile screen, reducing the effective width of the post. I want the posts to utilise as much width as possible on mobile screen to avoid problems when writing long chemical equations and formulae in posts and answers.

 

I have attached a screenshot to highlight the padding that should be reduced.

Posts: 12
Topic starter
(@sydchako)
Eminent Member
Joined: 1 year ago

Here is another screenshot of some mathematical equation overlapping the post area because its too narrow. Can you please help me widen that post area by reducing the padding. With other layouts, the width and padding are OK, and nothing overlaps. But I can't use other layouts because they lack the QA schema, which is what I need in the QA format.

4 Replies
Chris
Admin
(@chris)
Joined: 2 years ago

Support Team
Posts: 2778

@sydchako,

Remove the old one and use this:

#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-left {
    width: 35px;
}
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post{
    justify-content: unset;
}
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-content {
    margin-left: 0;
}
#wpforo #wpforo-wrap .wpforo-post blockquote, #wpforo #wpforo-wrap .wpforo-revision-body blockquote{
    width: 100%;
}
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-content {
    padding-right: 15px;
    padding-left: 15px;
}
(@sydchako)
Joined: 1 year ago

Eminent Member
Posts: 12

@chris somehow it didn't work. On the attached screenshot I  marked the bounds where the text should reach.

Chris
Admin
(@chris)
Joined: 2 years ago

Support Team
Posts: 2778

@sydchako,

Also add this:

#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right{
    width: 100%;
}
(@sydchako)
Joined: 1 year ago

Eminent Member
Posts: 12

@chris Thank you very much. This is exactly what I wanted. Perfect.