Jan 04, 2023 4:42 pm
Hi,
I am using the QA layout.
The "Vote" button and "margin" are too large on mobile. Look at the screenshot.
How can I reduce it?
Thanks
4 Replies
Jan 04, 2023 5:15 pm
try
@media screen and (max-width: 680px) {
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-left {width: 40px; font-size: 10px !important;}
#wpforo #wpforo-wrap .wpfl-3 .wpf-positive {font-size: 18px;}
#wpforo #wpforo-wrap .wpfl-3 .wpf-negative {font-size: 18px;}
#wpforo #wpforo-wrap .wpfl-3 .wpf-vote-number {font-size: 18px; line-height: 18px;}
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-left .wpf-toggle-not-answer {font-size: 20px; padding-top: 2px;}
}
visit my wpForo Community > Tutrix.de
with lots of customization & modification, e.g. hover cards, topic/post preview on mouseover, chatbox and much more...
Jan 04, 2023 5:45 pm
complete the code above with
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right {width: calc(100% - 52px);}
should then look like this, so that the content adapts to the mobile size
@media screen and (max-width: 680px) {
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-left {width: 40px; font-size: 10px !important;}
#wpforo #wpforo-wrap .wpfl-3 .wpf-positive {font-size: 18px;}
#wpforo #wpforo-wrap .wpfl-3 .wpf-negative {font-size: 18px;}
#wpforo #wpforo-wrap .wpfl-3 .wpf-vote-number {font-size: 18px; line-height: 18px;}
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-left .wpf-toggle-not-answer {font-size: 20px; padding-top: 2px;}
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right {width: calc(100% - 52px);}
}
visit my wpForo Community > Tutrix.de
with lots of customization & modification, e.g. hover cards, topic/post preview on mouseover, chatbox and much more...
