Blog page format incorrect

In upfront's blog page my setting are to show a the post overview in a grid layout. The result is a sequential layout which is incorrect.

  • Predrag Dubajic

    Hey Reinhard,

    Hope you're well :slight_smile:

    We are currently experiencing issues with Preset's CSS code not properly rendering on front end and that's why your blog page doesn't look like it should.
    Our developers already have a possible fix and our QA team is testing it out and we're hoping to see next release soon.

    In the meantime, I have copied your CSS, adjusted some selectors and pasted the new code in theme global CSS so you should be able to see your blog page properly now.

    Once the next release is out just make sure to remove this CSS that I added in Global CSS field:

    /* Blog Page Grid CSS */
    .upfront-region-container-main .upfront_posts-list > ul, ul.uf-posts {
        overflow: hidden;
        text-align: center;
    }
    .upfront-region-container-main li.uf-post {
        background: #ufc5;
        border: 1px solid #acbeba;
        display: inline-block;
        height: 280px;
        margin: 0 0 40px;
        padding: 0;
        width: 240px;
    }
    .upfront-region-container-main li.uf-post > article {
        display: block;
        height: 100%;
    }
    .upfront-region-container-main .uposts-part.thumbnail {
        height: 208px;
        margin: 0;
        overflow: hidden;
        width: 238px;
    }
    .upfront-region-container-main .uposts-part.title {
        display: block;
        height: 70px;
        margin: 0;
        padding: 15px;
        width: 100%;
    }
    .upfront-region-container-main .uposts-part.title h3 {
        background-color: transparent;
        font-family: "Special Elite", Arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .upfront-region-container-main .uposts-part.title h3 a {
        color: #ufc3;
        text-decoration: none;
    }
    .upfront-region-container-main .uposts-part.title h3 a:hover {
        color: #ufc1;
    }
    .upfront-region-container-main li.uf-post.noFeature {
        background: #ufc0;
    }
    .upfront-region-container-main li.uf-post.noFeature .uposts-part.title {
        height: 100%;
        padding: 0;
    }
    .upfront-region-container-main li.uf-post.noFeature .uposts-part.title h3 {
        display: block;
        height: 100%;
    }
    .upfront-region-container-main li.uf-post.noFeature .uposts-part.title h3 a {
        display: block;
        height: 100%;
        padding: 120px 0;
        -webkit-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
        width: 100%;
    }
    .upfront-region-container-main li.uf-post.noFeature .uposts-part.title h3 a:hover {
        background-color: #ufc1;
        color: #ufc5;
    }
    .upfront-region-container-main .uf-pagination.numeric {
        text-align: center;
    }
    .upfront-region-container-main .uf-pagination.numeric .page-numbers {
        border: 3px solid transparent;
        color: #acbeba;
        display: inline-block;
        font-family: "Lato", Arial, sans-serif;
        height: 37px;
        margin-right: 15px;
        padding: 5px;
        text-decoration: none;
        width: 37px;
    }
    .upfront-region-container-main .uf-pagination.numeric .page-numbers.current, .uf-pagination.numeric .page-numbers:hover {
        border-color: #ufc0;
        border-radius: 50%;
        color: #ufc0;
    }
    .upfront-region-container-main .uf-pagination.numeric .page-numbers.next, .uf-pagination.numeric .page-numbers.prev {
        background: url("//www.simplelivingcamps.com/wp-content/themes/uf-panino/ui/panino_sprite_v2.png") no-repeat;
        background-image: url("//www.simplelivingcamps.com/wp-content/themes/uf-panino/ui/panino_sprite_v2.svg"), none;
        border: none;
        border-radius: 0;
        font-size: 0;
        height: 24px;
        position: relative;
        line-height: 24px;
        width: 14px;
    }
    .upfront-region-container-main .uf-pagination.numeric .page-numbers.next {
        background-position: -233px -229px;
    }
    .upfront-region-container-main .uf-pagination.numeric .page-numbers.prev {
        background-position: -233px -69px;
    }
    .upfront-region-container-main .uposts-object li {
        border: none;
    }
    /* Blog Page Grid CSS END*/

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.