[Resolved] GP CSS gets destroyed by Simple CSS

Home Forums Support GP CSS gets destroyed by Simple CSS

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #979703
    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

    #979704
    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;
    }
    }

    #979720
    David
    Staff
    Customer Support

    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.

    #979760
    Klaus

    Great, thanks.

    #979765
    David
    Staff
    Customer Support
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.