[Resolved] GP CSS gets destroyed by Simple CSS

[Klaus]

Hello, I copied some code from the internet, put it into “Simple CSS” and it seems to harm the generatepress styling of my header on this specific page (I use navigation as header). Do you have an idea why this happens? It should look like “honigwerk.de” but it looks like “https://honigwerk.de/termine-und-timeline/”. Thanks, Klaus

[Klaus]

Here is the css I put in “Simple CSS” for this specific page:

.timeline{
–uiTimelineMainColor: var(–timelineMainColor, #222);
–uiTimelineSecondaryColor: var(–timelineSecondaryColor, #fff);

position: relative;
padding-top: 3rem;
padding-bottom: 3rem;
}

.timeline:before{
content: “”;
width: 4px;
height: 100%;
background-color: var(–uiTimelineMainColor);

position: absolute;
top: 0;
}

.timeline__group{
position: relative;
}

.timeline__group:not(:first-of-type){
margin-top: 4rem;
}

.timeline__year{
padding: .5rem 1.5rem;
color: var(–uiTimelineSecondaryColor);
background-color: var(–uiTimelineMainColor);

position: absolute;
left: 0;
top: 0;
}

.timeline__box{
position: relative;
}

.timeline__box:not(:last-of-type){
margin-bottom: 30px;
}

.timeline__box:before{
content: “”;
width: 100%;
height: 2px;
background-color: var(–uiTimelineMainColor);

position: absolute;
left: 0;
z-index: -1;
}

.timeline__date{
min-width: 65px;
position: absolute;
left: 0;

box-sizing: border-box;
padding: .5rem 1.5rem;
text-align: center;

background-color: var(–uiTimelineMainColor);
color: var(–uiTimelineSecondaryColor);
}

.timeline__day{
font-size: 2rem;
font-weight: 700;
display: block;
}

.timeline__month{
display: block;
font-size: .8em;
text-transform: uppercase;
}

.timeline__post{
padding: 1.5rem 2rem;
border-radius: 2px;
border-left: 3px solid var(–uiTimelineMainColor);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
background-color: var(–uiTimelineSecondaryColor);
}

@media screen and (min-width: 641px){

.timeline:before{
left: 30px;
}

.timeline__group{
padding-top: 55px;
}

.timeline__box{
padding-left: 80px;
}

.timeline__box:before{
top: 50%;
transform: translateY(-50%);
}

.timeline__date{
top: 50%;
margin-top: -27px;
}
}

@media screen and (max-width: 640px){

.timeline:before{
left: 0;
}

.timeline__group{
padding-top: 40px;
}

.timeline__box{
padding-left: 20px;
padding-top: 70px;
}

.timeline__box:before{
top: 90px;
}

.timeline__date{
top: 0;
}
}

.timeline{
–timelineMainColor: #4557bb;
font-size: 16px;
}

@media screen and (min-width: 768px){

html{
font-size: 62.5%;
}
}

@media screen and (max-width: 767px){

html{
font-size: 55%;
}
}

/*
* demo page
*/

body{
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
font-size: 1.6rem;
color: #222;

background-color: #fff;
margin: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}

p{
margin-top: 0;
margin-bottom: 1.5rem;
line-height: 1.5;
}

p:last-child{
margin-bottom: 0;
}

.page{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}

.page__demo{
flex-grow: 1;
}

.main-container{
max-width: 960px;
padding-left: 2rem;
padding-right: 2rem;

margin-left: auto;
margin-right: auto;
}

.page__container{
padding-top: 30px;
padding-bottom: 30px;
max-width: 800px;
}

.footer{
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
font-size: 1.4rem;
}

.footer__link{
text-decoration: none;
color: inherit;
}

@media screen and (min-width: 361px){

.footer__container{
display: flex;
justify-content: space-between;
}
}

@media screen and (max-width: 360px){

.melnik909{
display: none;
}
}

[David]

Hi there,

this CSS is causing the issue:

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.page__demo {
    flex-grow: 1;
}

I can’t see it is required and can be removed.

[Klaus]

Great, thanks.

[David]

You’re welcome

[Author]

Posts