- Affected Version
- WoltLab Suite 5.2
I am creating a personalized page with a "hero" section.
I created a custom css "noheader" and added to the page CSS Class Name:
CSS: Custom CSS
.noheader .pageHeaderFacade{
display:none;
}
.noheader .pageNavigation{
display:none;
}
.noheader .contentHeader{
display:none;
}
.noheader .pageTitle {
display: flex;
height: 100%;
width: 50%;
flex-direction: column;
align-items: flex-start;
-webkit-box-pack: center;
justify-content: center;
line-height: 0.82;
font-family: Biotif-Bold;
font-weight: 900;
//font-size: 8.75em;
//font-size: 105pt;
font-size: calc(60px + (150 - 60) * ((100vw - 300px) / (1600 - 300)));
color: rgb(246, 83, 31);
margin: 0px;
}
.noheader .headerTitle {
//padding-top: 20px !important;
font-family: Biotif-Bold;
font-size: 50px;
//font-size: 2vw;
font-weight: 900;
font-style: normal;
font-stretch: normal;
line-height: 0.05;
letter-spacing: normal;
text-align: left;
color: rgb(209, 73, 34);
margin: 0;
}
.noheader .pageText {
max-width: 960px;
font-family: Biotif-Medium;
word-break: break-word;
font-size: 18px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.07;
letter-spacing: 4.1px;
text-align: justify;
color: rgb(0, 0, 0);
margin: 0px;
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
/* fix white space */
.noheader .main {
padding: 0 !important;
margin: 0 !important;
}
.noheader .main>.layoutBoundary {
padding: 0 !important;
margin: 0 !important;
}
/* fix white space */
Display More
I need to remove the "pageHeaderFacade" and the "pageNavigation" sections...
Here is my page custom HTML
Code: Page HTML
<div class="boxesHero">
<div class="imagem1">
<div class="pageTitle">small<br />steps
</div>
</div>
</div>
<div class="fixLayout bg-red">
<span class="pageHeader fg-orange">The Header</span>
<p class="pageText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat sem, faucibus quis nunc ultricies, molestie interdum erat. Ut vestibulum velit lacus, et tristique neque vehicula eget. Mauris ante arcu, ultrices et tincidunt ut, iaculis dapibus odio. Cras euismod tellus sit amet arcu egestas consectetur. Cras eu augue eget erat viverra molestie id ut leo. Aenean sed orci eros. Integer ut fringilla enim.</p>
<p class="pageText">Curabitur id enim semper, euismod quam non, tempor erat. Curabitur lacinia lorem egestas quam malesuada auctor. Cras accumsan sem semper varius sodales. Curabitur gravida leo sed turpis ornare, non ullamcorper nibh egestas. Phasellus iaculis dictum molestie. Quisque libero nunc, tempor sed eros ac, ultrices aliquam massa. Proin cursus imperdiet ligula.
<br /><br /><button class="pageButton">JOIN US</button></p>
</div>
Display More
The first time I got some "white space" at the top and left.
So I add the "fix white space" in my custom css.
And it works nice...
But I can't fix the right white space after the red section...
Any ideas how to fix it?