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 Reactions
2,289 Views
Posts: 12
Topic starter
(@sydchako)
Eminent Member
Joined: 3 years 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.

Topic Tags
7 Replies
Chris
Posts: 3647
(@chris)
Famed Member
Joined: 3 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: 3 years 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: 3 years 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
(@chris)
Joined: 3 years ago

Famed Member
Posts: 3647

@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: 3 years 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
(@chris)
Joined: 3 years ago

Famed Member
Posts: 3647

@sydchako,

Also add this:

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

Eminent Member
Posts: 12

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