[Resolved] Adding container around posts

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Adding container around posts

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #16937
    William
    Participant

    Hi,

    How to make my wpsp design on homepage similar to this site. I want to make title, author, and excerpt centered. I’ve tried to mimic it as close as possible using wpsp but I’m missing the white rounded container padding for each of the separated posts. It’s only for the first 4 posts on my homepage as well as the “facts” section. The first big post along with posts in the “facts” heading will be horizontal while the 3 other posts below the big post will be vertical.

    My site is linked HERE
    Site password: Generatepress
    Thanks in advance!

    #16944
    Tom
    Keymaster

    Hi there,

    Something like this should do the trick:

    #wpsp-3429 .wp-show-posts-image.wpsp-image-left,
    #wpsp-3426 .wp-show-posts-image.wpsp-image-left {
        margin-bottom: 0;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    
    #wpsp-3429 .wpsp-content-wrap,
    #wpsp-3335 .wpsp-content-wrap,
    #wpsp-3426 .wpsp-content-wrap {
        padding: 40px;
        text-align: center;
    }
    
    #wpsp-3429 .wp-show-posts-inner,
    #wpsp-3335 .wp-show-posts-inner,
    #wpsp-3426 .wp-show-posts-inner {
        border-radius: 10px;
        box-shadow: 0 0 10px 10px rgba(0,0,0,0.03);
    }
    
    #wpsp-3335 .wp-show-posts-image img {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    #16957
    William
    Participant

    Wow! Thank You so much Tom! There’s just a little issue in tablet view, but I’ll make another thread for that. Thanks once again!

    #16959
    William
    Participant

    Hi Tom, sorry to bother you again. So I tried this CSS on my other site by replacing the wpsp short code and some code aren’t responsive. If you don’t mind can you take a look and see what’s going on? I’ve linked my other site in this post.

    Also, for tablet view everything looks out of place. And for mobile view is it possible to make something like this site?

    Thanks in advance!

    • This reply was modified 1 week, 2 days ago by William.
    #16971
    Tom
    Keymaster

    Hi there,

    Are those lists set to the base card like the other lists? I think that’s the main difference (HTML markup is different).

    What’s out of place on tablet, exactly? The second list images?

    To float your existing left-aligned images left on mobile, you can do this:

    @media (max-width: 767px) {
        .wp-show-posts-image.wpsp-image-left {
            float: left;
            margin-right: 1.5em;
            max-width: 150px;
        }
    }

    However, you’ll likely need to hide the excerpt on mobile for it to look good.

    #16991
    William
    Participant

    Hi Tom, I’m kind of a newbie when it comes to this. When I check wpsp both of my sites, under the “Cards” section is set to “none.” For the site that’s working properly with the code, the “cards” section is not set to “base” but to “none.” So I’m not sure why my other site isn’t responding to the same code even though the settings on wpsp matches with the site that is working.

    As for the tablet view (and when I slowly minimize the size of my web browser), the formatting changes. The padding becomes out of place as well as the excerpt.

    For the mobile code, how come it only works on the home page and not for other pages? And is there CSS to hide excerpt in mobile only?

    Just to clarify, everything mentioned is referring to the site linked in this post.

    Sorry for so many questions, still learning. haha

    Thanks in advance Tom!

    #16994
    William
    Participant

    Hi Tom, one more thing. For mobile view, I don’t want the image to float left but rather on top. Like “The Most Recent” section of the site I linked yesterday. I’ll include excerpt in desktop but exclude it in mobile view if possible.

    Thanks once again!

    #17034
    William
    Participant

    Hello Tom, so I’ve been trying for the past 2 days to get it to work, but I just can’t seem to figure it out. Just to make it clear this is what I’m trying to achieve.

    1.) I’m using the same CSS I used on the site I linked here (Password: Generatepress), but only some codes are responding in the site I linked here. When I check wpsp both of my sites, under the “Cards” section is set to “none.” For the site that’s working properly with the code, the “cards” section is not set to “base” but to “none.” So I’m not sure why the site I linked here isn’t responding to the same code even though the settings on wpsp matches with the site that is working.

    2.) Even with the code that works, under tablet view (and when I slowly minimize the size of my web browser), the formatting changes. The padding becomes out of place as well as the excerpt. How can i make it look smooth in tablet view and when minimizing the tab?

    3.) For the mobile view, I want the image to float on top, centered, just like how it is on desktop but with the height a bit thinner. I’ve decided not to add an excerpt to make it look clean. If it is not possible, it is fine, I just wanted to make it thinner so those on mobile don’t have to scroll a lot to see all the posts on the homepage.

    4.) How can I make the shadows around the padding more apparent?

    Sorry for so many questions Tom. I’m still learning lol.

    Thanks in advance!

    #17038
    Tom
    Keymaster

    Hi there,

    1. That’s strange. Does the site that’s “working” have any Elements in “Appearance > Elements”? If so, check to see if any of them have any wpsp related elements – you may need to copy them over.

    2. Are we looking at the full width post at the top? If so, this is happening because the image is quite wide. What would you like it to look like? One option is to reduce the width of the image on tablet:

    @media (max-width: 1024px) and (min-width: 768px) {
        #wpsp-3429 .wpsp-image-left {
            max-width: 400px;
        }
    }

    3. You could try reducing the height like this:

    @media (max-width: 767px) {
        #wpsp-2337 .wp-show-posts-image img, 
        #wpsp-3484 .wp-show-posts-image img, 
        #wpsp-3335 .wp-show-posts-image img {
            height: 150px;
            width: 100%;
            object-fit: cover;
        }
    }

    4. You can increase the 0.03 in box-shadow: 0 0 10px 10px rgba(0,0,0,0.03); to whatever you like.

    #17042
    William
    Participant

    Thank You Tom!

    #17070
    Tom
    Keymaster

    No problem! 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.