[Resolved] Having issues getting Magazine Grid to display

Home Forums Support [Resolved] Having issues getting Magazine Grid to display

Home Forums Support Having issues getting Magazine Grid to display

  • This topic has 10 replies, 3 voices, and was last updated 2 years ago by David.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #919840
    crackmacs

    Hi I just updated the theme on https://crackmacs.ca to GP (yay!)

    I’m having issues getting the magazine grid thing to display. It’s working here: https://lifetothemacs.ca

    I’m not sure what to do to correct it?

    Thanks

    #919843
    Leo
    Staff
    Customer Support

    Hi there,

    Is there a specific section I should be looking at?

    Both sites look very similar to me?

    Let me know 🙂

    #919846
    crackmacs

    Wow fast response, wasn’t expecting that haha

    Thanks!

    This — https://i.imgur.com/v551Jbz.png

    I copied the theme over to Crackmacs.ca and the settings, but I can’t seem to get the recent posts grid to display

    #919864
    David
    Staff
    Customer Support

    Hi there,

    looks like the Grid is displaying as its intended. What’s the issue exactly? The way the images are cropped? Let me know

    #919868
    crackmacs

    This is how I’m seeing it.

    Microsoft Edge

    Firefox

    http://archive.is/FECEE/image

    #919884
    David
    Staff
    Customer Support

    sorry was looking at the wrong URL.
    Somethings wrong with the CSS for the site. On import all of the necessary CSS should be in the Customizer > Additional CSS – i can’t see it in the WP_head instead there is a link being generated.

    Are you using any cache / optimization plugins for managing CSS?

    #919899
    crackmacs

    Gotcha!

    Are you using any cache / optimization plugins for managing CSS?

    No, although I have in the past.

    My contents of Customizer > Additional CSS

    .h2frontpage {
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      width: 88%;
      height: 0;
      top: 0;
    	padding: 20px;
    	margin-bottom: 15px;
    	margin-right: 15px;
    	margin-left: 0px;
    	margin-top: 15px;
      overflow: hidden;
      border: 1px solid;
      font: normal normal bold 15px/0 Arial, Helvetica, sans-serif;
      color: rgba(255,255,255,1);
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      background: #0199d9;
      text-shadow: 1px 1px 0 rgba(0,0,0,1) ;
    }
    hr.style3 {
    	border-top: 1px dashed #8c8b8b;
    }
    /* GeneratePress Site CSS */ /* Colors */
    .main-navigation ul li:after {
        background-color: #000;
    }
    
    .main-navigation .inside-navigation {
        border-top: 0.5px solid #d4d7d8;
    }
    
    .wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
        color: #fff;
    }
    .navigation-search.nav-search-active {
    	background-color: rgba(255,255,255,0.95);
    	top: 100%;
    }
    
    /* Theme Global */
    @media (min-width: 769px) {
        body {
            margin: 0 30px;
        }
    }
    
    body.single-post.no-sidebar .site-content {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Navigation */
    .second-nav.grid-container {
        padding: 0;
    }
    
    @media (min-width: 769px) {
        .main-navigation ul li {
            position: relative;
        }
    
        .main-navigation ul li:after {
            content: '';
            position: absolute;
            height: 0;
            width: 100%;
            bottom: 0;
            left: 0;
            pointer-events: none;
            filter: hue-rotation(90deg);
            -webkit-filter: hue-rotation(90deg);
            -webkit-transition: height 0.35s ease;
            transition: height 0.35s ease;
        }
    
        .main-navigation ul li:hover:after, .main-navigation ul li.current-menu-item:after {
            height: 6px;
        }
    }
    
    /* Widgets */
    .widget-title {
        margin: 1em 0;
        font-size: 0.8em !Important;
    }
    
    .widget .wp-show-posts article {
        margin-bottom: 0.5em !important;
    }
    
    .zero-padding {
        padding: 0 !important;
    }
    
    .widget.no-background {
        background-color: transparent;
    }
    
    /* Buttons */
    button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, a.wp-block-button__link:not(.has-background) {
        pointer-events: initial !important;
        border-color: inherit;
        border: 1px solid;
    }
    
    /* Page Heros */
    .page-hero.overlay {
        -webkit-box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
        box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
    }
    
    .gradient-overlay {
        position: relative;
        z-index: -1;
    }
    
    .gradient-overlay:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(3, 89, 155, .5)), to(rgba(14, 161, 234, .6)));
        background: linear-gradient(rgba(3, 89, 155, .5), rgba(14, 161, 234, .6));
        z-index: -1;
    }
    
    /* Blog */
    .generate-columns .inside-article {
        padding: 0 0 15px;
    }
    
    @media (max-width: 768px) {
        .generate-columns .inside-article>*:not(.post-image) {
            padding: 0 15px;
        }
    }
    
    .generate-columns-container article .inside-article .post-image {
        margin-bottom: 0.5em;
    }
    
    .generate-columns-container article .inside-article .entry-summary {
        margin-top: 0.5em;
        font-size: 0.8em;
    }
    
    .generate-columns-container article .entry-header, .wp-show-posts-entry-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    
    @media (min-width: 768px) {
    .generate-columns-container article .entry-header .entry-title, .wp-show-posts article .wp-show-posts-entry-title {
        line-height: 2.5ex;
        height: 5ex;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    }
    
    .wp-show-posts .wp-show-posts-inner {
        overflow: hidden;
    }
    
    @media (min-width: 420px) {
    .wpsp-align .wp-show-posts-image {
        margin-bottom: 0;
    }
    }
    .wpsp-align .wp-show-posts-image a, .wpsp-align .wp-show-posts-image img {
        height: 100%;
    }
    
    .generate-columns-container article .inside-article img, .wp-show-posts-image img {
        -o-object-fit: cover !important;
        object-fit: cover !important;
    }
    
    /* WPSP Grids */
    /* Single column align side image */
    /* Add wpsp-align class to to WPSP List shortcode wrapper */
    @media (min-width: 420px) {
        .wpsp-align .wp-show-posts-inner {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
    
        .wpsp-align .wp-show-posts-inner>div {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
    }
    
    @media (max-width: 768px) and (min-width: 420px) {
        .wpsp-align .wp-show-posts-inner .wp-show-posts-image {
            margin-right: 1.5em;
        }
    }
    
    /* magazine Grid Golden Ratio 5 block standard */
    /* Add wpsp-grid class to WPSP List shortcode wrapper */
    @media (min-width: 600px) {
        .wpsp-grid .wp-show-posts {
            display: grid;
        }
    }
    
    @media (min-width: 900px) {
        .wpsp-grid .wp-show-posts {
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: 1fr auto;
        }
    
        .wpsp-grid .wp-show-posts article:first-child {
            grid-column: 1 / 5;
            grid-row: 1 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(2) {
            grid-column: 5 / end;
            grid-row: 1 / 2;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(3) {
            grid-column: 5 / 7;
            grid-row: 2 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(4) {
            grid-column: 7 / end;
            grid-row: 2 / 4;
        }
    }
    
    @media (max-width: 899px) and (min-width: 600px) {
        .wpsp-grid .wp-show-posts article {
            grid-column: span 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
            grid-row: 3;
            grid-column: span 2;
        }
    }
    
    .wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
        height: 250px;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    
    .wpsp-grid article:first-child .wp-show-posts-image a img {
        height: 500px;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    
    .wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more {
        display: none;
    }
    
    /* WPSP Card Styling */
    /* Add wpsp-card class to WPSP List shortcode wrapper */
    .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
        font-size: 1em;
        font-weight: 500;
        text-transform: uppercase;
    }
    
    :not(.widget).wpsp-card .wp-show-posts article, .wpsp-card .wp-show-posts-image {
        margin-bottom: 0 !important;
    }
    
    .wpsp-card .wp-show-posts-inner {
        position: relative;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .wpsp-card .wpsp-content-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5% 8%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.35);
        background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
        background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }
    
    .wpsp-card article {
        position: relative;
        overflow: hidden;
    }
    
    .wpsp-card article, .wpsp-card article .wp-show-posts-image img {
        -webkit-backface-visibility: hidden;
        -webkit-transition: 0.3s all ease;
        transition: 0.3s all ease;
    }
    
    .wpsp-card article:hover .wp-show-posts-image img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-transition: 0.3s all ease;
        transition: 0.3s all ease;
    }
    
    /* Post Navigation */
    #post-nav a {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
        flex: 1 0 50%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    @media (max-width: 768px) {
        #post-nav a {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 100%;
            flex: 1 0 100%;
        }
    }
    
    #post-nav, #post-nav .post-nav-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    #post-nav {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 60px;
    }
    
    #post-nav .post-nav-wrap {
        background-size: cover !important;
        background-position: center center !important;
        min-height: 120px;
        height: 100%;
        padding: calc(6% + 1em) 5%;
        -webkit-box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
        -webkit-transition: -webkit-box-shadow 500ms;
        transition: -webkit-box-shadow 500ms;
        transition: box-shadow 500ms;
        transition: box-shadow 500ms, -webkit-box-shadow 500ms;
        position: relative;
    	box-sizing: border-box;
    }
    
    #post-nav .post-nav-wrap:hover {
        -webkit-box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
    }
    
    .post-nav-wrap>* {
        color: #fff;
    }
    
    .post-nav-date {
        font-size: 0.9em;
    }
    
    .post-nav-title {
        margin: 5px 0 !important;
    }
    
    .post-nav {
        min-width: 60px;
        position: absolute;
        top: 0;
        border-radius: 0 0 2px 0;
    }
    
    .post-nav:first-child {
        left: 0;
    }
    
    .post-nav:last-child {
        right: 0;
    }
    
    .post-nav {
        padding: 6px 12px;
        border-radius: 3px;
        font-size: 0.7em;
        text-transform: uppercase;
        background-color: #ff1956;
        color: #fff !important;
    }
    
    .header-widget .lsi-social-icons li {
    	margin-bottom: 0 !important;
    }
    
    body .happyforms-flex {
    	padding: 0;
    } /* End GeneratePress Site CSS */
    #919980
    David
    Staff
    Customer Support

    So the Header Element contains a WP Show Posts list, that list needs to be edited and the Image placed above the title.

    #919989
    crackmacs

    Aha it was that damn easy THANK YOU !

    All fixed now.

    #919990
    crackmacs

    Oh, marking as resolved. Thanks again

    #919997
    David
    Staff
    Customer Support

    Yeah sorry i should have spotted it earlier – the site is really designed that the list isn’t changed. And the image is required outside the content to create the grid squares.

    Glad we could be of help.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.