Forum
Permalink Browser Info Environment
Hi, I am trying to set up a forum to allow communication between users. I have used ortic forum which creates a forum page type and works as I would like, however it doesn't look right. The entry forms overhang the main page white area.
I realise that I am not explainging this too well but I am fairly in-experienced.
Is there anything I can do to make the forum fit the page?
I realise that I am not explainging this too well but I am fairly in-experienced.
Is there anything I can do to make the forum fit the page?
| Type: | Pre-Sale |
|---|---|
| Status: | In Progress |
Thanks Jordif, that works a treat on desktops an tablets, but doesn't seem to work too well on mobiles.
Not sure if the forum itself is responsive. You can try switching to the default Elemental theme and see how this looks on mobile.
Some quick solutions would be:
1) Change the above code to:
This should avoid the page from overflowing, while users should still be able to scroll to the right to see the entire table.
2) You could remove some of the table columns on mobile, so the table fits the screen. You could try something like this:
PLEASE NOTE that this may affect other tables in the forum pages (not sure if there are more tables), so make sure to test this thoroughly (I haven't).
If this does not work, you'll probably need help from a developer.
Cheers,
Some quick solutions would be:
1) Change the above code to:
#content > .container .container { max-width: 100%; overflow-x: auto; }
This should avoid the page from overflowing, while users should still be able to scroll to the right to see the entire table.
2) You could remove some of the table columns on mobile, so the table fits the screen. You could try something like this:
@media (max-width: 767px) { .page-type-forum #content .table tr th:nth-child(2), .page-type-forum #content .table tr th:nth-child(3), .page-type-forum #content .table tr th:nth-child(4), .page-type-forum #content .table tr th:nth-child(5), .page-type-forum #content .table tr td:nth-child(2), .page-type-forum #content .table tr td:nth-child(3), .page-type-forum #content .table tr td:nth-child(4), .page-type-forum #content .table tr td:nth-child(5) { display:none; } }
PLEASE NOTE that this may affect other tables in the forum pages (not sure if there are more tables), so make sure to test this thoroughly (I haven't).
If this does not work, you'll probably need help from a developer.
Cheers,
Thanks very much for your help. It is now in a position where I can open it up to our members.
you can try adding the followin custom CSS (Page Design -> Theme -> Customize -> Custom CSS):
If it does not help, please provide a link to your website or a screenshot.
Cheers,