[Resolved] Copied Loop-Template from Newsroom, but without success

[Stefanie]

Hi there,

I would like to use the loop-template from “Newsroom” (this grid-layout: https://gpsites.co/newsroom/category/community/) for my blog.

So I imported Newsroom on a dummy site, copied the element and pasted it into my site. But strangely I don’t get a grid layout, only rows: https://prnt.sc/k5kqTit-vCMT

But it should look like this: https://prnt.sc/hFuPzEfEVVot

Have I missed something?

[David]

Hi there,

can you edit the query loop block, inside it is the Post Template block, select that, and check it settings for a % width, make sure it is set to 50% ( for 2 columns ).

[Stefanie]

Hi,

thanks for your help.

This works partially. I have now set the grid to 33.3%, because there should be 3 cards in a row:
https://prnt.sc/hFuPzEfEVVot

But what does not work is the first card, which should be larger than the others:
https://prnt.sc/hFuPzEfEVVot

Also, unfortunately, I no longer have a featured image in my cards, even though I have set the dynamic data 🙁
https://relaunch.weismueller-photography.com/blog/

[Fernando]

Hi Stefanie,

Can you try deleting that Query Loop, and copying and pasting again the one in Newsroom?

Then, add this through Appearance > Customize > Additional CSS:

.archive .site-main {
	padding: 30px;
	background-color: var(--base-2);
}
@media (min-width: 769px) {
	.archive .site-main .ratio-third {
		display: grid;
  	grid-template-columns: repeat(3, 1fr);
	}
	.archive .site-main .ratio-third > .gb-query-loop-item:first-child {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}
}

Let us know how it goes.

[Stefanie]

works like a charm 🙂
I replaced .archive with .blog cause I’m using it for my blog-page.

Thanks very much!!!

[Fernando]

You’re welcome, Stefanie! 🙂

[Stefanie]

Hi again,

sorry, but I have to come back to this. The grid (copied from “Newsroom”) works very well now!

But now I changed the background-gradient in the loop-template and suddenly it doesn’t show the featured images anymore:
https://prnt.sc/UWIDk16Nb8Ac

this is the result: https://relaunch.weismueller-photography.com/blog/

[David]

Hi there,

select each of the colors in the Gradient and reduce its opacity, they’re currently at 100% so its hiding the image behind it

[Stefanie]

that’s it! 🙂

I mark this topic as resolved

Thank you very much!!

[David]

Glad to be of help

[Author]

Posts