- This topic has 10 replies, 2 voices, and was last updated 3 years, 5 months ago by
.
-
Posts
-
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!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; }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!
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!
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.
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!
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!
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!
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
wpsprelated 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.03inbox-shadow: 0 0 10px 10px rgba(0,0,0,0.03);to whatever you like.
- You must be logged in to reply to this topic.