I've got a problem that is baffling me. Here is my forum:
https://tracesoftexas.com/forum/
When I view it on a cellphone, the first few subforums have the separator lines going through them at various intervals. T However, they DO NOT have lines going through them at various intervals when I view them on a a computer monitor, an IPAD etc... They appear as they should, with the separator lines separating each subforum.
Here's a screenshot of the first few subforums on my Android phone:
Notice that the separator lines are running right through the text in some cases.
As I scroll further on down the forum list on my Android phone, the separator lines between the subforums disappear completely. See this screenshot:
Again, this is only true when viewed on a cellphone. On my Windows computer and on an IPAD the separator lines appear between the subforums as they should. I've looked at this on five different browsers on my cellphone: Chrome, Firefox, Brave, Duck Duck Go, and Opera, so it is not browser dependent. It appears the same way on my girlfriend's Apple phone, which uses the Safari browser.
Any ideas?
Thanks!
Hi @traces-of-texas,
Please navigate to Dashboard > Forums > Settings > Styles admin page. put this css code in the Custom CSS Code textarea. Save it, delete all caches. Then open a new private tab in your mobile phone to test the result. Please don;t use the regular mobile browser because it caches old pages and you'll not see the result:
@media screen and (max-width:620px) {
#wpforo #wpforo-wrap .wpfl-2 .wpforo-forum-info{float: none;}
}
Hi Robert,
Thanks for the response. .
Adding your CSS text has eliminated the random separator lines when I view the subforum list on my cellphone while holding the phone vertically (good!), but when I rotate the phone to horizontal the lines appear. I flushed the cache repeatedly. This is what it looks like on my phone in a private browser when I view horizontally.
So that's the first issue.
The second issue is that now when I go into the any of the subforums to look at the list of topics, a whole bunch of lines have been introduced that run through the first few topics and the formatting is all wonky, so that the topics are no longer aligned correctly etc... See this screenshot. Again, this is viewed in a private browser after adding your CSS text and flushing the cache.
If it helps, this is what my current CSS looks like:
#wpforo #wpforo-wrap {
width: 100%; padding:10px 0; margin:0px;
}
#wpforo #wpforo-wrap .wpforo-post .wpforo-post-content p {
padding: 0;
margin: 0 0 10px 0;
font-weight: bold;
line-height: 1.5;
}
#wpforo #wpforo-wrap .wpf-search i {
color: #fff !important;
}
@media screen and (max-width:620px) {
#wpforo #wpforo-wrap .wpfl-2 .wpforo-forum-info{float: none;}
}
Thank you, Robert.
I am really pleased with the way the Forum appears on a computer or an IPad, it's just the cell phones that I am having a hard time making look the right way.
Try this. Don't forget delete all caches and use private browser session when you check it:
@media screen and (max-width:1025px) {
#wpforo #wpforo-wrap .wpfl-2 .wpforo-forum-info,
#wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-info{float: none;}
}
