dividing the grid

Hi there,

You can try adding this CSS:

section#wpsp-2930 > article:nth-child(3n-1) {
    flex: 0 0 50%;
}

section#wpsp-2930 > article:not(:nth-child(3n-1)) {
    flex: 0 0 25%;
}

section#wpsp-2930 .wp-show-posts-inner {
    display: flex;
    flex-direction: column;
}

.wp-show-posts-image.wpsp-image-center * {
    width: 100%;
    height: 100%;
}

Simply change the 1699 in section#wpsp-1699 with the list ID of your WPSP list.

Hello Ejcabquina,

thanks for your help. Great. It works. I’m very happy.

Daniela

Nice one. glad it works for you. No problem. ??

Hello Ejcabquina,

the 3 first images on the homepage aren’t responsive at the moment. What kind of code I have to write that the images are responsive from desktop to mobil Like images 4 and 5.

Thaaanks in advance for your help

Daniela

To clarify: you want images 1-3 to be 100% width on mobile?

If that’s the case, you must wrap the CSS with @media rule so it doesn’t apply to the default mobile styling (100%).

Try this CSS:

@media(min-width:769px){  
section#wpsp-2930 > article:nth-child(3n-1) {
    flex: 0 0 50%;
}
section#wpsp-2930 > article:not(:nth-child(3n-1)) {
    flex: 0 0 25%;
}
section#wpsp-2930 .wp-show-posts-inner {
    display: flex;
    flex-direction: column;
}
.wp-show-posts-image.wpsp-image-center * {
    width: 100%;
    height: 100%;
}
}

Hello ejcabquina,
thank you so much for your help and duration!!!
But it’s too complex. I will try it with the simple grid.

Cheers
Daniela

No problem. ??