The first row, first column cell is always blank

Hi there,

That’s very strange, I’ll try and fix this for you.

I’m not able to replicate this issue, would you be able to show me a live URL of the download grid with the first download missing?

Thanks!

Here’s a link.
https://packs.socialvector.co.uk/browse/

I have tried it on 2 separate sites. The first site I actually configured the blocks on my page. In the link above, I already had the [downloads] shortcode on the page showing correct;y. All I have done is download and activate the Blocks plugin and you can see the first cell is empty.

Thanks, very helpful.

1. How many downloads have you set to show? 2, or 3?
2. Are both your sites that you tested on using the same theme?
3. Can you do a quick test for me and temporarily activate another theme such as Twenty Nineteen, or Twenty Seventeen and then see if that blank box is still there?

The reason for 3 above is because your theme’s CSS is outputting this rule:

div::before, article::before, aside::before, details::before, figcaption::before, figure::before, footer::before, header::before, hgroup::before, menu::before, nav::before, section::before, div::after, ul::after, article::after, aside::after, details::after, figcaption::after, figure::after, footer::after, header::after, hgroup::after, menu::after, nav::after, section::after {
    content: "";
    display: table;
}

The selector that is being executed is the div::before, a pseudo selector.

Essentially, the content line is inserting a blank element before every single div on the website. Because the Downloads grid uses CSS Grid, the empty space is being treated as part of the grid and thus becomes a grid element with the same dimensions as the others. Since there’s no content it just appears as a blank space.

The downloads shortcode in the current version of EDD does not yet use CSS grid, but it will in the next major upgrade. This is why you don’t see the blank space when using the downloads shortcode (since it uses floats to layout the downloads).

Let me know if the issue persists with the theme swap and we’ll go from there. You can change your theme back of course after we’ve confirmed the issue.

• This reply was modified 5 years, 9 months ago by Andrew Munro.

I’ve set it show 2. 3 would have been ideal but the purchase buttons overlapped when viewed on a phone or tablet.

Yes both sites are using the same theme

Activated 2019 and the issue wasn’t present so looks like it’s the theme.

Ok thanks for confirming!

Let me see if I can put together some CSS that will fix the issue with the space. Are you comfortable with adding some custom CSS to your theme? You can add it to the WordPress customizer, there’s a section in there for custom CSS.

Yes I am comfortable with adding custom CSS. Thank you for looking into this ??

Great!

Give this a shot – I’ve tested to confirm the issue first using your theme’s CSS and also that the CSS below correctly hides that first empty ::before selector, but only for any grid of downloads outputted by EDD:

.edd_downloads_list::before {
    display: none;
}

That works. No more empty space. Thanks for the speedy resolution ??
https://packs.socialvector.co.uk/browse/

You’re welcome, great to hear! ??