Duplicating the "Look" of another page

Hi James,

Consider adding #f4f4f4 background color to the container block containing the WPSP list.

You then add this CSS:

section#wpsp-3831 article.wp-show-posts-single {
    background-color: #fff;
    padding: 40px 0px;
}

Note: you may have to change or remove the section#**** selector if you want to apply this on multiple WPSP lists.

Looks good to me! I'm awaiting my co-admin to put her stamp of approval on it, so please don't close this thread just yet?

Thanks!

Sure. Let us know how it goes. :D

It looks good on a large screen, but it doesn't adapt to a small screen, such as my phone.

Hi there,

you have this CSS:

.page-id-3829 .wp-show-posts-image.wpsp-image-center img {
    max-width: 1080px;
}

Which is allowing the image to extend beyond the container - change that to this:

@media(min-width: 1080px) {
    .page-id-3829 .wp-show-posts-image.wpsp-image-center img {
        max-width: 1080px;
    }
}

Thanks David, I will implement this CSS later today and report back.

We'll be here :)

Hmm..it's still not displaying correctly on my Android, and I cleared the browser cache as well.

Hi James,

Try add this CSS:

@media (max-width: 768px) {
.page-id-3829 .inside-article .wp-show-posts-single {
    padding: 40px !important;
}
.page-id-3829 .inside-article  {
    padding-top: 40px !important;
}
}

Hi Ying, that CSS worked nicely, thank you! Only one thing remains: the position of the "Current Page" title of the page is a little higher on the page than on other pages, such as the "Submit" page. Can this be rectified?

I see, add this CSS as well:

@media (min-width: 769px) { 
.page-id-3829 .inside-article  {
    padding-top: 60px !important;
}
}

Hi Ying, it looks good on my phone now, but on my desktop screen the Current Page title still displays higher on the page than on the other pages.

Ying's CSS seems to be working fine when I tested to confirm:
https://share.getcloudapp.com/Qwu4vkjW

Can you check if the CSS was properly added? There seems to be a syntax error on the CSS. (missing } )

I can't find where it is missing, Elvin. Should I set up a temp Admin account for one of you?