Making Articles Full-Width?
Brad Thompson
I'm using the SP Page Builder Article Integration.
I want to make SP Page Builder Articles full-width and padded like regular SPB pages and to remove the social media icons and top row of article details, ratings, padding, etc.
Also, this needs to only be for specific categories for articles. The blog can stay the default width, so I'm assuming I'll need this to be a page class overide.
All the CSS I've tried is affecting the top menu width, which I don't want.
What files do I need to modify and the proper CSS to achieve this?
Paul Frankowski
Accepted AnswerPlus use/add also that:
body.full-width #sp-main-body > .container {
max-width: 100%; padding: 0; }Paul Frankowski
Accepted AnswerHi Brad,
- Yes, only via Custom CSS - but that method will only hide elements (!) not disable from loading them.
- Custom CSS and Custom Class Name for page is needed. Use custom.css file as always (!) -- give me a few minutes.
Paul Frankowski
Accepted Answer- In Menu item: Page Display (tab) > Page CSS: full-width
- Now inside custom.css file or Template Options > Custom Code > Custom CSS
.full-width .article-details .article-ratings-social-share {display: none !important;}
.full-width #sp-page-builder > .page-content > .sppb-section > .sppb-row-container {max-width: 100%;}Brad Thompson
Accepted AnswerHi Paul,
Thank you for looking into this for me. I'm usually good at figuring CSS out but I'm getting defeated by this one.
The override you provide works with hiding the article details and social icons. The full width for things like the hero section does not work.
Note: I won't be actually typing any article content into Joomla for these pages, I'm need to use articles for pages for the custom fields feature.
This is what I have currently:
.fullwidth #sp-main-body {
padding: 0 0 !important;
}
.fullwidth .article-details .article-ratings-social-share {
display: none !important;
}
.fullwidth #sp-page-builder > .page-content > .sppb-section > .sppb-row-container {
max-width: 100%;
}If I add the following CSS, I get the full width, but the header, menu and footer go full-width aswell breaking template layout consistency. I wasn't able to figure out CSS to fix it.
.fullwidth .container,
.fullwidth .container-inner {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}Even with this there's still a small 5px gap between the menu and hero section.
Below are two same content pages, one made with SPB and the other using an Article. The article needs to match the SPB page.
Brad Thompson
Accepted AnswerUpdate:
I found the problem.
Bootstrap classes .container & .container-inner are in both the header/menu and the article body.
When you add CSS to go full width, they both go full width.
So there needs to be a way to differentiate them so the header/menu is not affected by the article body change.
This is my point of confusion as I'm new to Bootstrap moving over to SP Page Builder/HelixUltimate.
Pavel
Accepted AnswerHi Brad. To make a full width article using SPPB is not such a simple task. Here is my css snippet (for SPPB 3).
In some cases, additional coding may be required. Or at least this will serve you as a starting point.
The basic principle is Bootstrap and the site layout should not be affected. Only the SPPB part is redefined.
container must remain by default. Remove the code for body.full-width #sp-main-body > .container which you added earlier.
/*************SPPB Full Width Section for articles and sppb modules*******/
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
margin: auto;
}
@media (min-width: 1400px) {
.phm-mod-article-full-width-section {
margin: 0 -21vw !important;
width: inherit !important;
}
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
max-width: 1320px;
}
}
@media (max-width: 1399px) {
.phm-mod-article-full-width-section {
margin: 0 -10vw !important;
width: inherit !important;
}
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
max-width: 1140px;
}
}
@media (max-width: 1199px) {
.phm-mod-article-full-width-section {
margin: 0 -10vw !important;
width: inherit !important;
}
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
max-width: 960px;
}
}
@media (max-width: 991px) {
.phm-mod-article-full-width-section {
margin: 0 -16vw !important;
width: inherit !important;
}
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
max-width: 720px;
}
}
@media (max-width: 767px) {
.phm-mod-article-full-width-section {
margin: 0 -17vw !important;
width: inherit !important;
}
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
max-width: 540px;
}
}
@media (max-width: 575px) {
.phm-mod-article-full-width-section {
margin: 0 -5vw !important;
padding-left: 20px !important;
padding-right: 20px !important;
width: inherit !important;
}
.phm-mod-article-full-width-section .sppb-row-container,
.phm-mod-article-full-width-section .sppb-container-inner {
max-width: 100%;
}
}
/*****************End******************/Usage:
- Add this code to custom.css file.
- Add the phm-mod-article-full-width-section class to the necessary SPPB sections.
I created this snippet for a long time, in times of Helix Ultimate 1.x.x. Now I have ideas for a more elegant solution, taking into account new options in Helix. But so far at the development stage.
thomas cassen
Accepted Answerhi Pavel, is this trick now implemented in Helix ? i've the same need. But i need to set it in template options, not by tweaking css and classes with the risk of breaking template appearence. thx
