Archived topic
Content width increase of a page
9 replies · Started by Jatin on July 20, 2021
Hi Guys,
I am linked my page in the private box. My requirement is to increase the width of the page.
Please let me know if its possible natively or custom css ?
Thank You.
Hi there,
those forum pages are adding their own classes to the <body> of the page - and they all look like they contain a string with wpf- in them. So you can try this CSS:
/* Set Container Width */
body[class*="wpf-"] .grid-container {
max-width: 1900px;
}and optionally if you want to adjust the % widths of content/sidebar:
@media(min-width: 1025px) {
body[class*="wpf-"] .site-content .content-area {
width: 80%;
}
body[class*="wpf-"] .is-right-sidebar {
width: 20%;
}
}Thank you David. As always the support you guys provide is top-notch.
Works like a charm.
Glad to be of help!
Hi David,
Currently the sidebar on the same page is showing in one flow rather than in their own boxes. Can you please advise if its possible here. Each sidebar in its box with white background as like Marketer Theme Sidebar shown in https://generatepress.com/site-library/.
The forum plugin is not outputting the standard HTML. It will require some CSS:
body[class*="wpf-"] .inside-right-sidebar > div {
padding: 20px;
margin-bottom: 20px;
background-color: #fff;
}/* Set Container Width */
body[class*="wpf-"] .grid-container {
max-width: 1900px;
}Hi David, This Code works fine on my forum page but affected my main blog page as well. I thought its using a class of wpf so should affect only to the forum but the width of the main blog page also changed to this. Links are in the box.
Hmm.. that plugin is adding classes where they're not required.
Try this instead:
/* Set Container Width */
body[class*="wpforo"] .grid-container {
max-width: 1900px;
}Hi David,
Can you please let me know how to make the below page (in private box) Full Width (Only on Mobile Phone). On Desktop the size looks fine. Change required only for Mobile.
Currently the page has a lot of margin on the left and right and shows in the middle (Mobile only).
Change should not affect the Original Blog Post just that page. thank YOu
Try this:
@media(max-width: 768px) {
body[class*="wpforo"] .inside-article {
padding: 5px;
}
}