- This topic has 7 replies, 2 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
Hi Tom,
1.) How can I style my related post like my recent post on the sidebar? The thing is for recent post in sidebar, there’s wpsp id # that I can copy and paste into existing CSS. However, I’m using this tutorial here. Apparently they style with “.wpsp-related-post1” instead of wpsp id #. So I’m a bit confused on how I can make it the same as my sidebar recent post. I’m assuming i also have to change code for the hook?
2.) Once I’m able to achieve the same stying as my recent post, can you provide CSS so when in vertical tablet view, it’ll show in 2 columns just like how it shows two columns for my recent posts when in vertical tablet view? If not there’s excess margins/padding since image is not big enough.
3.) Lastly how come for sidebar recent posts, if the title is long the padding/margin in longer. If the title is shorter, it’s also shorter. It’s not the same as the ones on my homepage where the padding/margin size stays consistent regardless of the title length.
My website can be found in this post
Website password: GeneratepressThank You so much Tom! Really apprecaite your help!
Hi there,
If you’re going to want to re-use those same styles we built, I suggest actually adding a custom class to the lists that you can keep re-using.
For example, you can add a class in the More Settings area: https://docs.wpshowposts.com/article/more-settings-overview/
Then, you can replace the
#wpsp-123IDs we used in your custom CSS with the custom class:.my-custom-classThat way you can re-use that CSS across multiple lists.
Otherwise, you need to add a new selector for each list ID you want to target.
Once we get that sorted we can work on the CSS for tablet 🙂
Totally forgot about that. The CSS looks so much better and way easier. Now I don’t have to manually add the post id to the CSS. Thanks Tom!
Now on to #2 and #3. 🙂
Let me reexplain #2. So, actually it looks fine across all three views (desktop, tablet, mobile). The problem occurs only when I shrink my browser tab. Once the browser tab px is less than tablet but more than mobile, there’s excess margins/padding since the image is not big enough. What I want to do is to show 2 columns until it reaches mobile size if possible. Hope my explaining is clear.
As for #3 it’s still the same. Sidebar widget recent posts padding is inconsistent compared to other wpsp. If the title is shorter, it’s also shorter. It’s not the same as the ones on my homepage where the padding/margin size stays consistent regardless of the title length.
Thank You!
2. You could try something like this:
@media (max-width: 768px) and (min-width: 500px) { .wp-show-posts-columns#wpsp-3484 { margin-left: -2em !important; } .wp-show-posts-columns#wpsp-3484 article { width: 50%; padding-left: 2em; box-sizing: border-box; } }3. Can you show me a screenshot of what you mean here?
Hi Tom, Thank You for the CSS code!
As stupid as it sounds I can’t seem to locate where my screenshot files are located or even if I did take the screenshot. Guess I’ll try my best to explain it. If you click on one of the posts and look at the recent posts on the right, you’ll notice how the containers underneath each image where the title is located has a different size depending on the length of the title. Now, if you look at the homepage, you’ll notice how all of the containers wrapping the wpsp are the same length regardless of the title lengths. That’s what I’m trying to achieve with the recent posts wpsp.
It should be easier to see if you minimize the browser tab to tablet size, click into one of the posts, and scroll down until you see recent posts. It’ll look uneven. You can even compare it to the related post and notice how related posts are even. Hope my explaining is clear.
Thanks in advance!
Ah, I’m not sure that’s possible in this case, unfortunately.
The reason the containers are all the same height in your content is being they’re “flex” items (due to the columns setting), which will automatically be the same height.
The items in your sidebar are just one column, so they’re independent of each other.
- You must be logged in to reply to this topic.