Having issues getting Magazine Grid to display

Hi there,

Is there a specific section I should be looking at?

Both sites look very similar to me?

Let me know :)

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

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

This is how I'm seeing it.

Microsoft Edge

Firefox

http://archive.is/FECEE/image

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?

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 */

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

Aha it was that damn easy THANK YOU !

All fixed now.

Oh, marking as resolved. Thanks again

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.