AI Search
Classic Search
 Search Phrase:
 Search Type:
Advanced search options
 Search in Forums:
 Search in date period:

 Sort Search Results by:

AI Assistant
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
3,066 Views
Posts: 12
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@sydchako)
Eminent Member
Joined: 4 years ago
[#27023]

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.

IMG 20221207 141221

Topic Tags
7 Replies
Chris
Posts: 3610
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@chris)
Famed Member
Joined: 5 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: 4 years ago

Eminent Member
Posts: 12
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@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.

 IMG 20221207 150326

Posts: 12
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@sydchako)
Eminent Member
Joined: 4 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.

Screenshot 20221207 152433

4 Replies
Chris
(@chris)
Joined: 5 years ago

Famed Member
Posts: 3610
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@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: 4 years ago

Eminent Member
Posts: 12
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

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

 IMG 20221210 071610

Chris
(@chris)
Joined: 5 years ago

Famed Member
Posts: 3610
Chris
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@sydchako,

Also add this:

#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right{
    width: 100%;
}

(@sydchako)
Joined: 4 years ago

Eminent Member
Posts: 12
Chris
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

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

 Screenshot 20221212 143012

Share: