Problems with Wordpress image gallery formatting

[Russinating]

I'm having major problems replicating Wordpress's post preview with actually what it's outputting. See below.



Left is how Wordpress is displaying the image gallery when editing the post, right is the gallery on the post preview. It is a totally custom template - I know my way around HTML/CSS/PHP etc - but unless I'm totally missing something (because it's 4.30pm) I can't see that it's posting any classes unique to the third image that should be full-width horizontal.

Below is the code on the preview render page (with URLS taken out for legibility):

<figure class="wp-block-gallery columns-2 is-cropped">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item"><figure><img src="/" alt="" data-id="724" class="wp-image-724" srcset="/" /></figure></li>
<li class="blocks-gallery-item"><figure><img src="/" alt="" data-id="11" class="wp-image-11" srcset="/" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li>
<li class="blocks-gallery-item"><figure><img src="/" alt="" data-id="717" class="wp-image-717" srcset="/" /></figure></li>
</ul></figure>

Regardless of my CSS (which I've got as far as displaying the first two images correctly), there's no unique class or tag to style the third image to be full width... unless I'm going bonkers!

Help!

 

[Dup]

Is there not supposed to be an nth-child class to make the third 100% width?

You could inspect the preview and the template in the browser and see what the difference is.

 

[visibleman]

As @Dup mentions, sound like you need set the width of the image last item so using :nth-last-child() should help with that, ie -

.blocks-gallery-item:nth-last-child(1) img {
    width: 100%;
}

Edit - Although i'm not entirely sure how it'd work with even number of images. You might (haven't tested it) be able to use something like the below to only select last child if odd -

:last-child:nth-child(odd)

 

[Russinating]

Thanks guys, I'm using a 'custom' gallery now just using regular images rather than Wordpress's gallery blocks but your comments were useful since I'm not looking at the nth-child and having issues.

I've done a test post at https://jonesmillbank.com/blog/2020/05/13/this-is-what-a-post-looks-like for example. I want to add left padding the 2nd/every even half-width image but the following code isn't doing nada:

.hp img:nth-child(2n) {
    padding:10px 0 10px 10px;
}

.hl img:nth-child(2n) {
    padding:10px 0 10px 10px;
}

Swapped 2n for odd/even and 2 and no luck. Any ideas?

Don't worry, img needs to go after the nth-child!

 

[touch]

The image is the only child in it's container so you don't have any images which are a 2nd child.
You need to find the replicated block (which is the <li> in your OP code example) and find the second child of that then drill down to the image tag:

li:nth-child(2) figure img{
padding:10px 0 10px 10px;
}