Hey,
thanks for reaching out! Would you be so kind and give me a link to your blog, so that I can take a closer look? I think we can make that distribution happen but I will see what I can do about the scaling thing.
Looking forward to your reply, take care and have a nice day,
Petra
Hey Petra,
Thanks for your reply! My blog is still on a local host, so that’s a bit of a problem. Is there anything else I can do so you can help me out? Some code in particular you’re looking for?
Cheers,
Miguel
Hey Miguel,
thanks for getting back to me!
Well, usually I check which theme someone uses and then I test the CSS code modifications on my side. But you can try it out – go to the plugin settings-> “Advanced settings”-> click that “Enable custom CSS”-> and in the box add the following:
ul.related_post li{
padding: 20px !important;
}
Let me know if this changes anything and we will continue from there. It would help if you could at least make a screenshot of how the related posts look like now.
In the meantime I will test if I can make those images scale with the browser.
Take care,
Petra
Hey Petra,
Thanks for replying, you’re awesome! The theme I’m using is Sparkling by Colorlib.
I should have mentioned that I copied the css from the vertical layout into the custom css, which is from where I’m tweaking the css.
So I changed that code to 20px, which was too far to the right, but 12px puts it nicely in the center. That is, of course, until I start narrowing the window.
Here’s the screenshot: http://www.dropbox.com/s/9z20bo1uxs9grwi/Untitled.png?dl=0
Can I use css to move around the ‘Related posts’ text as well? Guess that’s more of a html thing in the plugin code itself, huh?
And here’s the whole of my custom code, if it’s of any help:
.wp_rp_wrap .related_post_title {
clear: both;
padding: 0 !important;
margin: 0 !important;
}
div.wp_rp_content {
display: inline-block !important;
}
div.wp_rp_footer {
text-align: right !important;
overflow: hidden !important;
}
div.wp_rp_footer a {
color: #999 !important;
font-size: 11px !important;
text-align: left !important;
text-decoration: none !important;
display: inline-block !important;
}
div.wp_rp_footer a.wp_rp_edit {
color: #fff !important;
font-size: 12px !important;
text-decoration: underline !important;
text-align: left !important;
font-weight: bold !important;
background: #f79124 !important;
border-radius: 2px !important;
padding: 3px 6px;
}
ul.related_post {
display: inline-block !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
}
ul.related_post li {
position: relative !important;
display: inline-block !important;
vertical-align: top !important;
zoom: 1 !important;
*display: inline !important;
width: 200px !important;
text-align: left !important;
margin: 10px 10px 10px 0px !important;
padding: 12px !important;
background: none !important;
}
ul.related_post li a {
position: relative !important;
display: block !important;
font-size: 13px !important;
line-height: 1.6em !important;
text-decoration: none !important;
margin-bottom: 5px !important;
text-indent: 0 !important;
}
ul.related_post li img {
display: block !important;
width: 200px !important;
height: 133px !important;
max-width: 200px !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
opacity:1 !important;
-webkit-transition: opacity 0.5s !important;
-moz-transition: opacity 0.5s !important;
-o-transition: opacity 0.5s !important;
transition: opacity 0.5s !important;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
ul.related_post img:hover
{
opacity:0.6 !important;
-webkit-transition: opacity 0.5s !important;
-moz-transition: opacity 0.5s !important;
-o-transition: opacity 0.5s !important;
transition: opacity 0.5s !important;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
ul.related_post li a img.wp_rp_santa_hat {
display: none !important;
}
ul.related_post li small {
font-size: 80%;
}
Muchas gracias for your help, looking forward to what you came up with for the scaling!
Hey,
I really tried to make the scaling work with CSS and our plugin but I couldn’t brute force it anyway other than this (put the following after your custom code):
@media only screen and (min-width: 150px) {
ul.related_post li {
width: 40px !important;
height: 26px !important;
}
ul.related_post li img {
width: 40px !important;
height: 26px !important;
}
}
@media only screen and (min-width: 480px){
ul.related_post li {
width: 80px !important;
height: 53px !important
}
ul.related_post li img {
width: 80px !important;
height: 53px !important
}
}
ul.related_post li small {
font-size: 80%;
}
@media only screen and (min-width: 680px) {
ul.related_post li {
width: 100px !important;
height: 66px !important;
}
ul.related_post li img {
width: 100px !important;
height: 66px !important;
}
}
@media only screen and (min-width: 880px) {
ul.related_post li {
width: 140px !important;
height: 93px !important;
}
ul.related_post li img {
width: 140px !important;
height: 93px !important;
}
}
@media only screen and (min-width: 1080px) {
ul.related_post li {
width: 160px !important;
height: 106px !important;
}
ul.related_post li img {
width: 160px !important;
height: 106px !important;
}
}
@media only screen and (min-width: 1400px) {
ul.related_post li {
width: 200px !important;
height: 133px !important;
}
ul.related_post li img {
width: 200px !important;
height: 133px !important;
}
}
Horrible coding I know 🙂 If you find a better solution let me know.
Take care and have a nice weekend,
Petra
