CSS Style With WP Show Posts and EDD

Hi there,

The gray background is coming from this CSS in your child theme's style.css.

.wp-show-posts-columns#wpsp-3239 .wp-show-posts-inner {
    text-align: center;
    background-color: rgba(0,0,0,0.04);
    padding: 14% 7%;
}

The spacing between columns are set on WPSP edit page's Column tab. It's the Column gutter.

Hi Elvin,

I don't think I explained my situation correctly. My concern is the 'Download" page, which is wpsp#6146 (https://doodle.house/download).

1. I would like to remove the secondary grey background.
2. The spacing between the image, header, and body is way off. How can I fix it?

Please see the screenshot.
https://www.dropbox.com/s/5557sdvrnlwh00v/Screen%20Shot.jpg?dl=0

Thank you.

I see,

for #1:

Note sure which one of the backgrounds you want removed.

But if it's the one wrapping the WPSP list, the background seems to be coming from it being wrapped by a <pre> tag.

You can override the CSS with this:
pre#block-608631eb-dbaf-4e9a-b719-142c6fc086ad { background: unset; }

For #2:

Can you provide any mockup image of how much spacing you want to trim from it?

Note: most of the spacings you see are from the CSS you've added on the child theme's CSS.

But the biggest one seems to be the one from the Customizer setting under Appearance > Customize > Layout > Container.

Hi Elvin,

That you...background issue was resolved. As for the spacing, I want it to be exactly like the Portfolio page...

Portfolio page

I applied the following but doesn't seem to be working.

.wp-show-posts-columns#wpsp-6146 .wp-show-posts-inner {
    text-align: center;
    background-color: rgba(0,0,0,0.04);
    padding: 14% 7%;
}

.wp-show-posts-inner :last-child {
    color: #777;
    margin-top: 4px;
}

.wp-show-posts-columns#wpsp-6146 .wp-show-posts-entry-summary {
    padding: 0 15% 7%;
    font-size: 16px;
    line-height: 1.55;
}

.wp-show-posts-columns#wpsp-6146 .wp-show-posts-entry-title {
    padding: 3% 14% 0;
    line-height: 1.55;
    font-size: 24px;
}

.wp-show-posts-columns#wpsp-6146 .wp-show-posts-inner {
    padding: 1.5em 1.5em 0 1.5em;
    border: 1px solid #eee;
  -webkit-border-radius: 6px; 
  -moz-border-radius: 6px; 
  border-radius: 6px;    
}

pre#block-608631eb-dbaf-4e9a-b719-142c6fc086ad { 
	background: unset; 
}

I think it's the <pre> that wraps around the WPSP that's causing the issue.

You can see here that if I modified the page structure to remove the <pre> and its delimiter, the post list displays well.
https://share.getcloudapp.com/geub7nA6

Can you try removing it?

While we can solve it by adding another CSS property - white-space: unset; to it like we did w/ the background, it may be better to just remove it completely.

Much appreciated! That fixed it.

No problem. :)